CSS常用属性2

一、边框（Border）

　　border：复合属性。设置对象边框的特性。

　　取值：border: line-width | line-style | color

　　　　1)line-width：设置或检索对象边框宽度。

　　　　2)line-width：设置或检索对象边框样式。

　　　　3)color:设置或检索对象边框颜色。

示例：

这里有边框

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            div{
                width: 200px;
                height: 200px;
                border: 5px solid #000000;
            }
        </style>
    </head>
    <body>
        <div>
            <p>这里有边框</p>
        </div>
    </body>
</html>

　　1、边框宽厚（border-width）：指定边框厚度。

　　　　取值：border-width：length | thin | medium | thick

　　　　　　1）length：用长度值来定义边框的厚度。不允许负值

　　　　　　2）medium：定义默认厚度的边框。计算值为3px

　　　　　　3）thin：定义比默认厚度细的边框。计算值为1px

　　　　　　4）thick：定义比默认厚度粗的边框。计算值为5px

　　　　border-width-top | border-width-bottom | border-width-left | border-width-right　　分别指上、下、左、右边框。

　　2、边框样式（border-style）：定义边框的样式

　　　　取值：border-style:line-style 效果如下：

dotted:定义一个点线框
dashed:定义一个虚线框
solid:定义实线边界
double:定义两个边界。两个边界的宽度和border-width的值相同
groove: 定义3D沟槽边界。效果取决于边界的颜色值
ridge: 定义3D脊边界。效果取决于边界的颜色值
inset:定义一个3D的嵌入边框。效果取决于边界的颜色值
outset: 定义一个3D突出边框。效果取决于边界的颜色值

　　border-top-style | border-bottom-style | border-left-style | border-right-style　　分别指上、下、左、右边框。

代码如下：（- -！算了格式上面有，效果又有。）

　　3、边框颜色（border-color）：设置边框的颜色。可以设置的颜色。

　　　　取值：border-color:color(指定颜色)

这个边框有四种颜色

以上css代码如下：

div{
    width: 70px;
    height: 70px;
    border-width: 5px;
    border-style: solid;
    border-top-color: red;
    border-right-color: blue;
    border-bottom-color: green;
    border-left-color: yellow;
}

　　4、利用边框做出三角箭头：

div{
    width: 0;
     height: 0; 
    border-top: 100px solid red; 
    border-left: 100px solid transparent; 
    border-right: 100px solid transparent;
}

　　4、圆角效果（border-radius）：向元素添加圆角边框

所有角都是用半径为5px的圆角

div{
    margin:5px;
    width: 50px;
     height: 50px;
    background: black; 
    border-radius: 5px;
}

四个半径值分别是左上角、右上角、右下角、左下角，顺时针

div{
    margin: 5px;
    width: 50px; 
    height: 50px; 
    background: black; 
    border-radius: 5px 4px 3px 2px;
}

也可以分别设置每个角的垂直半径和水平半径，用斜杠隔开，第一个参数表示左上角开始顺时针的水平半径，第二个参数左上角开始顺时针的垂直半径

div{
    margin: 5px;
    width: 50px; 
    height: 50px; 
    background: black;
    border-radius: 5px 10px 15px 20px/3px 5px 10px 15px;
}

圆

div{
    margin: 5px;
    width: 50px; 
    height: 50px; 
    background: black;
    border-radius: 50%;
}

半圆

div{
    margin: 5px; 
    width: 25px; 
    height: 50px; 
    background: black; 
    border-radius: 50px 0 0 50px;
}/*width是height的一半*/

　　5、边框图片（border-image）：边框样式使用图像填充。

　　　　取值：

　　　　　　border-image-source：设置或检索对象的边框是否用图像定义样式或图像来源路径。

　　　　　　border-image-slice：设置或检索对象的边框背景图的分割方式。

　　　　　　border-image-width：设置或检索对象的边框厚度。

　　　　　　border-image-outset：设置或检索对象的边框背景图的扩展。

　　　　　　border-image-repea：设置或检索对象的边框图像的平铺方式。

示例：

.test {
    border: 10px solid gray;
    border-image: url(test.png) 10/10px;
}

使用图像替代 <' border-style '> 去定义边框样式。当 <' border-image '> 为none或图像不可见时，将会显示 <' border-style '> 所定义的边框样式效果。

二、盒子阴影（box-shadow）：向盒子添加阴影。支持添加一个或者多个。

　　　　取值：box-shadow: X轴偏移量 Y偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]

外阴影常规效果

div{
    margin: 5px; 
    width: 50px; 
    height: 50px; 
    background: red; 
    box-shadow: 5px 5px rgba(0,0,0,.6);
}

外阴影模糊外延阴影效果

div{
    margin: 5px; 
    width: 50px; 
    height: 50px; 
    background: red; 
    box-shadow: 5px 5px 5px 5px rgba(0,0,0,.6);
}

内阴影效果

div{
    margin: 5px; 
    width: 50px; 
    height: 50px; 
    background: red; 
    box-shadow: 2px 2px 5px 1px rgba(0,0,0,.6) inset;
}

双内阴影效果（两个阴影用逗号分开）

div{
    margin: 5px; 
    width: 50px; 
    height: 50px; 
    background: red; 
    box-shadow: 2px 2px 5px 1px rgba(0,0,0,.6) inset,-2px -2px 5px 1px rgba(0,0,0,.6) inset;
}

三、段落

　　1、行高（line-height）：控制段落内每行高度。

　　　　取值：line-height: normal | length

代码如下：

p{line-height:15px}
p{line-height:150%}

　　2、段落缩进（text-indent）：控制段落的首行缩进。

　　　　取值：text-indent:lenght

代码如下：

p{text-indent:2em}

　　4、段落对齐（text-align）：控制段落对齐方式，不但是文本，对象中的其他inline或inline-block元素也能够被text-align进行对齐方式设置。

　　　　取值：text-align: left | right | center | justify(两端对齐)

代码如下：

p{text-align:right}
p{text-align:center}

　　5、文字间距（letter-spacing）：控制段落文字间的间距。

　　　　取值：letter-spacing:normal | length

代码如下：

p{letter-spacing:5px;}

　　6、文字溢出（text-overflow）: 控制文字内溢出部分的样式。

　　　　取值：text-overflow:clip | ellipsis

　　　　　　1)clip：当内联内容溢出块容器时，将溢出部分裁切掉。

　　　　　　2)ellipsis：当内联内容溢出块容器时，将溢出部分替换为（...）

　　但是text-overflow只是用来说明文字溢出时用什么方式显示，要实现溢出时产生省略号的效果，还必须定义强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），
只有这样才能实现显示溢出文本显示省略号的效果。

代码如下：

原效果

以二三四五六七八九十

ellipsis效果

以二三四五六七八九十

p{
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}

　　7、段落换行（word-wrap）：控制内容超过容器的边界时是否断行。

　　　　取值：word-wrap: normal | break-word

　　　　　　1)normal：允许内容顶开或者溢出指定的容器边界。

　　　　　　2)break-word:内容将在边界内换行。如果需要，单词内部允许断行。

四、背景样式

　　background：复合属性。设置或检索对象的背景特性。元素的背景是元素的总大小，包括填充和边界（但不包括边距）

　　1、背景颜色（background-color）：设置一个元素的背景颜色。

　　　　取值：background-color:color(颜色)

如下：

div{
    width:50px;
    height:50px;
    background-color:green;
}

　　1.1、渐变色彩（linear-gradient）：CSS3 Gradient 分为线性渐变（linear）和径向渐变（radial）。

　　- 第一个参数省略时，默认为”180deg“，等同于”to bottom“。
　　- 第二个和第三个参数，表示颜色的起始点和结束点，可以有多个颜色值。（颜色值后面可以追加百分比，表示这个颜色要占总背景颜色的面积百分比）

div{
    width: 100px; 
    height: 100px; 
    border: 1px solid black; 
    background-image: linear-gradient(to left,red 30%,blue);
}

　　2、背景图（background-image）：设置一个元素的背景图像。

　　　　取值：background-image: none | url(url)

　　3、背景平铺方式（background-repeat）：设置如何平铺对象的 background-image 属性。默认情况下，重复background-image的垂直和水平方向。

　　　　取值：background-repeat: repeat | no-repeat | repeat-x | repeat-y |

值	说明
repeat	背景图像将向垂直和水平方向重复。这是默认
repeat-x	只有水平位置会重复背景图像
repeat-y	只有垂直位置会重复背景图像
no-repeat	background-image不会重复
inherit	指定background-repea属性设置应该从父元素继承

　　4、背景定位（background-position）：设置背景图像的起始位置。

　　　　取值：background-position: 左对齐方式上对齐方式

值	描述
left top left center left bottom right top right center right bottom center top center center center bottom	如果仅指定一个关键字，其他值将会是"center"
x% y%	第一个值是水平位置，第二个值是垂直。左上角是0％0％。右下角是100％100％。如果仅指定了一个值，其他值将是50％。。默认值为：0％0％
xpos ypos	第一个值是水平位置，第二个值是垂直。左上角是0。单位可以是像素（0px0px）或任何其他 CSS单位。如果仅指定了一个值，其他值将是50％。你可以混合使用％和positions
inherit	指定background-position属性设置应该从父元素继承

（- -！妈蛋！今天就写到这里了...困死了！- -！把感冒灵冲剂当成饮料喝了！）

posted @ 2016-08-12 00:13 mumushi 阅读(210) 评论(0) 编辑收藏举报

刷新页面返回顶部

mumushi

CSS常用属性2

以二三四五六七八九十

以二三四五六七八九十

公告