CSS基础篇之选择符3

border(边框)

如何用CSS调出边框

我们给p标签加一个边框试一下

 

p{
    border:1px  solid   #ccc;/*这是缩写*/
}

 

第一个值是为边框的宽度

 第二个值是为边框线样式为直线

第三个值是为边框的颜色

 

border-width(边框的宽度)

 

 

 

如果不调宽度的话默认边框是从左边到最右边。设置之后可以调节宽度。

 

border-top-width:;上

 

border-bottom-width:;下

 

border-left-width:;左

 

border-right-width:;右

 

 

 

border-style(边框线样式)

 

单个边框线调节样式

border-top-style:;(设置上边框)

border-bottom-style:;(设置下边框)

border-left-style:;(设置左边框)

border-right-style:;(设置右边框)

 

缩写div{ width300pxheight100pxborder-style:solie;}

 

      宽度            高度             边框样式

其他边框样式值

none:无轮廓。border-color将被忽略,border-width计算值为0,除非边框轮廓为图像,即border-image。

hidden:隐藏边框。IE7及以下尚不支持

dotted:点状轮廓。IE6下显示为dashed效果

dashed:虚线轮廓。

solid:实线轮廓

double:双线轮廓。两条单线与其间隔的和等于指定的border-width值

groove:3D凹槽轮廓。

ridge:3D凸槽轮廓。

inset:3D凹边轮廓。

outset:3D凸边轮廓。

 

 

border-color(边框颜色)

 

 

 

还可以设置单个边的颜色

 

border-top-color:;上

 

border-right-color:;右

 

border-bottom-color:;下

 

border-left-color:;左

 

利用边框做出三角箭头

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

 

 

圆角效果

 

 

所有角的半径为10px圆角矩形。

div{
                width: 300px;
                height: 300px;
                background-color: black;
                margin: 10px;
                border-radius: 15px;/*上右左下*/
            }

 

 

 

 

四个角的半径分别为左上角顺时针到左下角的半径的。

div{
                width: 300px;
                height: 300px;
                background-color: red;
                margin: 10px;
                border-radius: 10px 15px 20px 30px;
}

 

 

 

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

div {
                width: 300px;
                height:300px;
                background-color: green;
                margin: 10px;
                border-radius:40px  30px  20px  10
px/5px  10px  15px  20px;
            }

 

画圆

div{
    border-radius:50%
}

 

 

竖着的半圆

div{
    height: 300px;
                background-color: yellow;
                width: 150px;
                border-radius: 150px 0 0 150px;/*宽是高的一半*/
                margin: 10px;    
}

 

横着的半圆

div{
                width: 300px;
                background-color: yellowgreen;
                height: 150px;
                border-radius: 150px 150px 0 0;/*高是宽的一半*/
            }

 

 

盒子阴影

书写格式:box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径]  [阴影颜色] [投影方式];

 

外阴影常规效果

div{
                width:100px;
                height:100px;
                background-color:#cccccc;
                box-shadow: 5px 5px 20px #000000;    
            }

 

 

外阴影模糊外延效果

div{    
width:100px;
                height:100px;
                background-color:#cccccc;
                box-shadow:5px 5px 5px 20px #000000 ;
            }

 

 

内阴影效果

div{
                width:100px;
                height:100px;
                background-color:#cccccc inset;
            }

 

 

 

双内阴影效果

div{
                width:100px;
                height:100px;
                background-color:#cccccc;
                box-shadow:5px 5px 20px 2px #000000 inset,-2px -2px 5px 1px #ccc inset;
            }

 

 

段落样式

行高(line-height)

p{
Width:300px;
Height:500px;
Line-height:150px;
}

行高是指内容的宽度到文字顶部之间的距离就是行高。

 

段落缩进

 

P{
Text-indent:em;
}

 

 

从左往右缩进了一个字符的间隔。数量不要太多。

 

 

 

段落对齐

Text-align:left | right | center | justify;

P{
Text-align:left;
}

 

 

 

 

文字间距

Letting-spacing:间距长度;

P{
Letting-spacing:10px;
}

 

 

每个字都会有间距间距距离取决于你的间距长度大小

 

 

 

文字溢出

 

Text-overtlow:clip | ellipsis

 

Clip的表现出来的效果是文字溢出的部分才会隐藏

 

Ellipsis的表现出来的效果是文字溢出的部分全部以...表示

 

如何用ELlipsis如何实现文字溢出时产生省略号的效果需要用到whtie-space:nowrap;(不换行)

 

Overflow:hidden;(隐藏溢出的部分)

Div{
width: 140px;
                border: 1px solid #000;
                white-space: nowrap;/*不换行*/
                overflow: hidden;/*隐藏溢出于边框部分*/
        text-overflow: ellipsis/clip;
}

我这里加了一个边框让你们看的更清楚。

 

 

背景样式

背景颜色

Background-color:transparent | color;(透明和颜色)

div{
     Bakcground-color:#cccccc;
}
Div{
Background-color:transparent;
}

 

背景图片

Background-image:none | url

注意这个图片插入要写url。

Background-image:none | url

P{
     Background-image:url(./图片名);
}

背景平铺方式

Background-repeat:repeat | no-repeat | repeat-x| repeat-y

repeat:平铺

P{
Background-repeat:on-repeat;
}

 

背景定位

Background-position:左对齐方式   上对齐方式

No-repeat:不平铺

X-repeat:从X轴开始平铺

Y-repeat:从Y轴开始平铺

P{
     Background-color:right bottom;     
    }

 

posted @ 2016-08-12 11:27  迷。  阅读(197)  评论(0编辑  收藏  举报