1.边框圆角在早期如果想要制作四周有圆角的元素时,需要专门制作一张图片(这其实没什么),但是试想一下,如果要修改圆角的各种关系,比如颜色,半径等等,必须去重新修改图片才能够实现(十分麻烦).
在html5中针对这个效果专门推出了一个属性border-radius
w3c_CSS3边框讲解页面
使用方法:属性名:border-radius
赋值方法:赋值的方法类似于marginbackground-color:rebeccapurple;border-radius:20px;/*设置四周的圆角*/
设置四周的圆角.pngbackground-color:aqua;
border-radius:50px10px;/*上左下右,上右下左*/
上左下右,上右下左.pngbackground-color:seagreen;
border-radius:50px30px10px;/*上左,上右下左,下右*/
上左,上右下左,下右.pngbackground-color:chartreuse;
border-radius:50px40px30px20px;/*上左,上右,下右,下左*/
上左,上右,下右,下左.pngbackground-color:magenta;
border-radius:50px/100px;/*上下的圆角/左右的圆角*/
上下的圆角/左右的圆角.pngbackground-color:palevioletred;
border-top-left-radius:40px;/*上左*/
border-top-right-radius:10px;/*上右*/
border-bottom-left-radius:20px;/*下左*/
border-bottom-right-radius:50px;/*下右*/
上左,下右,上右,下左.png
小结:该属性的用法十分简单,只要搞清楚四边的对应关系,就能够制作各种精美组合效果
边框阴影除了可以为元素的四周设置倒圆角以外,CSS3还为我们提供了阴影的功能,能够制作更为精美的外观
w3c_CSS3边框讲解页面
使用方法属性名:box-shadow
可选值:h-shadow:必需。水平阴影的位置。允许负值。
v-shadow:必需。垂直阴影的位置。允许负值。
blur:可选。模糊距离。
spread:可选。阴影的尺寸
color:可选。阴影的颜色。请参阅 CSS 颜色值。
inset:可选。将外部阴影 (outset) 改为内部阴影。
示例代码这里青色的为li标签box-shadow:-10px20pxred;
shaw1.pngbox-shadow:5px5px20pxpink;/*x偏移值,y偏移值,影子四周模糊程度,影子颜色*/
shaw2.pngbox-shadow:5px5px0px5pxred;/*x偏移值,y偏移值,影子四周模糊程度,影子额外的长度,影子颜色*/
/*影子默认跟元素一样大*/
shaw3.pngbox-shadow:inset0px0px100pxyellow;/*添加了inset以后,影子会往内部伸展,其他的都是一样的*/
shaw4.pngbox-shadow:5px5pxyellow,-5px-5pxblue,10px10pxgreen;/*多个影子的添加只需要使用逗号分隔即可*/
shaw5.png注意:这里演示的只是基本用法,实际开发中配合更高的审美观,能够制作更为精美的页面
字体阴影这个属性的使用十分类似box-shadow
基本使用属性名: text-shadow
赋值方法_3个值:5px 5px red
x偏移值,y偏移值,阴影颜色
字体阴影.png赋值方法_4个值:5px 5px 10px pink
x偏移值,y偏移值,阴影模糊程度,阴影颜色
字体阴影_模糊.png赋值方法_多个阴影5px 5px red,10px 10px yellow;
通过逗号的来分隔不同的阴影
字体阴影_多个阴影.png
Demo(凹凸文字)首先让我们来看看字体的具体外观
凹凸字体实例.png凹字体:参照上图,当阳光从左上角照射时,字体是凹进去时,内部的轮廓线会被照射为白色
凸字体:参照上图,当阳光从左上角照射时,字体是凸起时,右上角的轮廓线会被照射为白色分析:阳光照射的轮廓线在上或者是在下就可以让我们产生这是凹,凸字体的错觉
具体代码:html>
Title
body{background-color:gray;
}a{/*字体阴影*/
/*x偏移值y偏移值(阴影的面积不能给负值)字体颜色多个之间使用逗号分隔*/
text-decoration:none;font:bolder3em"微软雅黑";color:gray;
}.ao{text-shadow:1px1px#fff,-1px-1px#000;
}.tu{text-shadow:1px1px#000,-1px-1px#fff;
}
点击去看魔兽世界大电影_凹下点击去看魔兽世界大电影_凸起
作者：Rella7
链接：/p/27b145730e94
