CSS3边框阴影与选择器应用.pdfVIP

请说出以下选择器的含义

AE~FBE:beforeCE:nth-child(n)

DE[att=val]EE:emptyFE:focus

GE[att^=”val”]HE:checked

⚫CSS3边框

圆角边框、多色彩边框、图像边框

⚫CSS3阴影

文本阴影、盒阴影

⚫能够说出当前浏览器对边框属性的支持度

⚫在实际的网页编写过程中能够灵活的进用

⚫可以轻松的用css3边框实现一些效果

border-radius

圆角边框

G

⚫语法

border-radius：[length|percentage]{1,4}[/[length|

percentage]{1,4}]?

默认值：0

⚫浏览器支持情况

IE9.0以前版本不支持

⚫源代码：

⚫语法：

border-colors：color

相关属性：[border-top-colors]||[border-right-colors]||[borde

r-bottom-colors]||[border-left-colors]

⚫浏览器支持情况

火狐（FF）2.0以上版本支持

理解切割

⚫border-image:url()30%20%40%10%stretch;

10%

30%

40%

20%

角边框是没有任何展示效果

属于展示效果的作用区

（也是边框宽度计算剩余

区）

⚫案例制作(使用谷歌浏览器)

使用border-image实现如下效果

⚫第一步调用边框

border-image:url(图像边框.png);

案例制作

所需素材

‘图像边框.png’

⚫第二步裁剪

border-image:url(图像边框.png)33%;

案例制作

默认为所需素材

拉伸效果‘图像边框.png’

⚫第三步更改重复效果完成！

border-image:url(图像边框.png)33%repeat;

案例制作

所需素材

‘图像边框.png’

⚫语法：

border-image：border-image-source||border-image-slice[/

border