CSS3中,新增了圆角边框、盒子阴影和文字阴影样式。
一、圆角边框(重要)
在CSS3中,新增了圆角边框的样式,这样我们的盒子就可以变圆角了。
语法:
border-radius:length;
其中:
radius半径(圆的半径)原理:(椭)圆与边框的交集形成圆角效果 -->
border-radius属性用于设置元素的外边框圆角。
参数值可以为数值或百分比的形式;
注意:
如果是正方形,想要设置为一个园,把数值修改为高度或者宽度的一半即可,或者直接写为50%;
如果是个矩形,设置为高度的一半就可以做圆角矩形;
该属性是一个简写属性,可以跟四个值,分别代表左上角、右上角、右下角、左下角;
也可以分开写:
border-top-left-radius 左上角
border-top-right-radius 右上角
border-bottom-right-radius 右下角
border-bottom-left-radius 左下角
<style>
.yjbk {
width: 300px;
height: 150px;
background-color: pink;
border-radius: 10px;
}
.yuanxing {
width: 200px;
height: 200px;
background-color: pink;
border-radius: 100px;
/* border-radius: 50%; 50%就是宽度的一半,等价于上面的100px*/
}
.juxing {
width: 300px;
height: 100px;
background-color: pink;
/* 圆角矩形设置高度的一半 */
border-radius: 50px;
}
.radius {
width: 200px;
height: 200px;
background-color: pink;
border-radius: 20px 30px 40px 50px;
}
</style>
</head>
<body>
圆角边框:
<div class="yjbk"></div>
圆形的做法:
<div class="yuanxing"></div>
圆角矩形:
<div class="juxing"></div>
可以设置不同的角度:
<div class="radius"></div>
</body>
二、盒子阴影(重要)
CSS3中新增了盒子阴影,我们可以使用box-shadow属性为盒子添加阴影。
语法:
box-shadow:h-shadow v-shadow blur spread color inset;
参数:
h-shadow 必需,水平阴影的位置,允许负值。
v-shadow 必需,垂直阴影的位置,允许负值。
blur 可选,模糊距离。
spread 可选,阴影的尺寸。
color 可选,阴影的颜色,请参阅CSS颜色值。
inset 可选,将外部阴影(outset)改为内部有阴影。
<style>
div {
width: 200px;
height: 200px;
background-color:pink;
margin: 100px auto;
/* box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, .3); */
}
/* 原本盒子没有影子,当我们鼠标经过时出现影子 */
div:hover {
box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, .3);
}
</style>
</head>
<body>
<div></div>
</body>
注意:
1.默认的是外阴影(outset),但是不可以写这个单词,否则导致阴影无效。
2.盒子阴影不占用空间,不会影响其他盒子排列。
三、文字阴影
在CSS中,我们可以使用text-shadow属性将阴影应用于文本。
语法:
text-shadow:h-shadow v-shadow blur color;
参数:
h-shadow 必需,水平阴影的位置,允许负值。
v-shadow 必需,垂直阴影的位置,允许负值。
blur 可选,模糊的距离。
color 可选,阴影的颜色,请参阅CSS颜色值。
<style>
div {
font-size: 50px;
color: orange;
font-weight: 700;
text-shadow: 5px 5px 6px rgba(0, 0, 0, .3);
}
</style>
</head>
<body>
<div>你是阴影</div>
</body>