CSS3圆角边框
圆角边框border-radius
语法：border-radius:长度值;
说明：长度值可以是px、百分比、em等。
-
border-radius属性值的4种写法
- 1、
border-radius设置1个值
当border-radius设置1个值时，例如“border-radius:10px;”表示4个角的圆角半径都是10px
- 2、
border-radius设置2个值
当border-radius设置2个值时，例如“border-radius:10px 20px;”表示左上角和右下角的圆角半径是10px，右上角和左下角的圆角半径都是20px
- 3、
border-radius设置3个值
当border-radius设置3个值时，例如“border-radius:10px 20px 30px;”表示左上角圆角半径是10px，左下角和右上角圆角半径都是20px，右下角圆角半径是30px
- 4、
border-radius设置4个值
当border-radius设置4个值时，例如“border-radius:10px 20px 30px 40px;”表示左上角、右上角、右下角和左下角的圆角半径依次是10px、20px、30px、40px
-
border-radius画实心半圆和实心圆
- 1、实心半圆
假如我们要制作实现上半圆，实现方法：把高度height设为宽度width的一半，并且只设置左上角和右上角的圆角半径与元素的高度一致，而右下角和左下角的圆角半径设置为0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#div1 {
width: 200px;
height: 100px;
border: 1px solid red;
border-radius: 100px 100px 0 0;
background-color: #FCE9B8;
}
</style>
</head>
<body>
</body>
<div id="div1"></div>
</html>
浏览器效果
- 2、实心圆
在CSS3中，使用border-radius属性实现实心圆方法：把宽度（width）与高度(height)值设置为一致（也就是正方形），并且四个圆角值都设置为它们值的一半
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#div1 {
width:100px;
height:100px;
border:1px solid red;
border-radius:50px;
background-color:#FCE9B8;
}
</style>
</head>
<body>
</body>
<div id="div1"></div>
</html>
浏览器效果
图片边框border-image
语法简写
border-image属性
- 说明：从上面语法分析图，我们可以看出，使用
border-image属性设置边框背景图片需要设置3种参数：
（1）图片路径；
（2）切割图片的宽度（4条边的宽度，依次为上边、右边、下边、左边，按照顺时针方向，类似于border属性的4条边顺序）；
（3）图片平铺方式；
- 使用
border-image属性为边框添加背景时候，如果想要达到预期效果，我们需要注意以下2点：
（1）边框的背景在制作时候，应该制作4条边，中间部分需要挖空；
（2）边框背景图片的每条边宽度跟对应的边框宽度（border-wdith）应该相同；
- 边框背景图片延伸方式
- 重复
repeat；4条边的小方块会不断重复，超出元素宽度或高度的部分将会被剪切掉。
- 铺满
round；可以理解为圆满地铺满，为了实现圆满，边框图片会压缩或拉伸。
分析：repeat会把超出宽度和高度的部分剪切掉，而round却是拉伸或压缩边框部分以实现“圆满”地平铺。
- 拉伸
stretch；指的是对边框部分进行拉伸（不重复），有多长拉多长。
边框阴影
- 在
CSS3中，我们可以使用box-shadow属性轻松地为元素添加阴影效果
语法：box-shadow：x-shadow y-shadow blur spread color inset;
- 说明：
（1）x-shadow：设置水平阴影的位置（X轴），可以使用负值；
（2）y-shadow：设置垂直阴影的位置（y轴），可以使用负值；
（3）blur：设置阴影模糊半径；
（4）spread：扩展半径，设置阴影的尺寸；
（5）color：设置阴影的颜色；
（6）inset：这个参数默认不设置。默认情况下为外阴影，inset表示内阴影。
- 当水平阴影位置
x-shadow和垂直阴影位置y-shadow都为0时，阴影都向外发散或者都向内发散。
- 四条边框独立样式
语法：box-shadow: 左边阴影,顶部阴影,底部阴影,右边阴影;
网友评论