码迷,mamicode.com
首页 > Web开发 > 详细

CSS3选择器、背景、边框、文本

时间:2015-07-11 11:58:37      阅读:172      评论:0      收藏:0      [点我收藏+]

标签:

选择器:

[attribute^=value] 属性值以value开头的元素

[attribute&=value] 属性值以value结束的元素

[attribute*=value] 属性值包含value的元素

:first-of-type 父元素第一个兄弟元素

:last-of-type 父元素最后一个兄弟元素

:only-child 父元素只有唯一一个子元素

:only-of-type 父元素只有唯一一个兄弟元素

:nth-child(n) 父元素第n个子元素

:nth-last-child(n) 父元素倒数第n个子元素

:nth-of-type(n) 父元素第n个兄弟元素

:empty 没有子元素的元素

:checked 被选中的元素

 

边框:

border-radius:圆角边框

border-radius:length;

/*以length为半径的圆角*/

 

box-shadow:边框阴影

box-shadow:h-shadow v-shadow blur spread color inser/outset;

/*h-shadow:水平位置,v-shadow:垂直位置,blur:模糊距离,spread:阴影尺寸,color:阴影颜色,inser:内部阴影/outset:外边阴影*/

 

border-image:边框图片

border-image-source:图片路径

border-image-slice:边框向内偏移

border-image-width:图片边框宽度

border-image-outset:边框图像超出边框的量

border-image-repeat:边框是否平铺(repeated)、铺满(rounded)、拉伸(stretched)

 

背景:

background-clip:背景绘制区域 border-box、padding-box、content-box

backdround-origin:背景定位 border-box、padding-box、content-box

background-size:length | percentage | cover | contain

/*length:图片宽高:第一个值宽度,第二个值高度*/

/*percentage:以父元素百分比宽高:一宽,二高*/

/* cover:完全覆盖背景区域*/

/*contain:完全覆盖内容区域*/

 

文本:

text-shadow:文本阴影

text-shadow:h-shadow v-shadow blur color

/*h-shadow:水平位置,v-shadow:垂直位置,blur:模糊距离,color:阴影颜色*/

 

word-wrap:换行

word-warp:normal(断字点换行)|break-wrap(长单词或URL换行)

CSS3选择器、背景、边框、文本

标签:

原文地址:http://www.cnblogs.com/qyhyq/p/4638161.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!