1.边框圆角
在早期如果想要制作四周有圆角的元素时,需要专门制作一张图片(这其实没什么),但是试想一下,如果要修改圆角的各种关系,比如颜色,半径等等,必须去重新修改图片才能够实现(十分麻烦).
在html5中针对这个效果专门推出了一个属性border-radius
w3c_CSS3边框讲解页面
使用方法:
-
属性名:
- border-radius
-
赋值方法:
- 赋值的方法类似于
margin
- 赋值的方法类似于
background-color: rebeccapurple;
border-radius:20px;
/*设置四周的圆角*/
设置四周的圆角.png
background-color: aqua;
border-radius: 50px 10px;
/*上左下右,上右下左 */
上左下右,上右下左.png
background-color: seagreen;
border-radius: 50px 30px 10px;
/*上左,上右下左,下右*/
上左,上右下左,下右.png
background-color: chartreuse;
border-radius: 50px 40px 30px 20px;
/*上左,上右,下右,下左*/
上左,上右,下右,下左.png
background-color: magenta;
border-radius: 50px/100px;
/*上下的圆角/左右的圆角*/
上下的圆角/左右的圆角.png
background-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:-10px 20px red;
shaw1.png
box-shadow: 5px 5px 20px pink;
/*x偏移值,y偏移值,影子四周模糊程度,影子颜色*/
shaw2.png
box-shadow: 5px 5px 0px 5px red;
/*x偏移值,y偏移值,影子四周模糊程度,影子额外的长度,影子颜色*/
/*影子默认跟元素一样大*/
shaw3.png
box-shadow: inset 0px 0px 100px yellow;
/*添加了inset以后,影子会往内部伸展,其他的都是一样的*/
shaw4.png
box-shadow: 5px 5px yellow,-5px -5px blue,10px 10px green;
/*多个影子的添加 只需要使用逗号分隔即可 */
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
-
凹字体:
- 参照上图,当阳光从左上角照射时,字体是
凹进去时,内部的轮廓线会被照射为白色
- 参照上图,当阳光从左上角照射时,字体是
-
凸字体:
- 参照上图,当阳光从左上角照射时,字体是
凸起时,右上角的轮廓线会被照射为白色
- 参照上图,当阳光从左上角照射时,字体是
-
分析:
- 阳光照射的轮廓线在上或者是在下就可以让我们产生这是
凹,凸字体的错觉
- 阳光照射的轮廓线在上或者是在下就可以让我们产生这是
具体代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
background-color:gray;
}
a{
/*字体阴影*/
/*x偏移值 y偏移值 (阴影的面积不能给负值) 字体颜色 多个之间使用逗号分隔*/
text-decoration: none;
font:bolder 3em "微软雅黑";
color: gray;
}
.ao{
text-shadow: 1px 1px #fff,-1px -1px #000;
}
.tu{
text-shadow: 1px 1px #000,-1px -1px #fff;
}
</style>
</head>
<body>
<a href="" class="ao">点击去看魔兽世界大电影_凹下</a>
<br>
<a href="" class="tu">点击去看魔兽世界大电影_凸起</a>
</body>
</html>
