CSS动画DAY01
Posted 547hh
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS动画DAY01相关的知识，希望对你有一定的参考价值。
1.border-radius用于添加圆角效果
border-radius：[ <length> | <percentage> ]1,4 [ / [ <length> | <percentage> ]1,4 ]?
<length>：用长度值设置对象的圆角半径长度。不允许负值
<percentage>：用百分比设置对象的圆角半径长度。不允许负值
border-radius:5px 10px 15px 20px; 一个矩形的四个角，顺序是顺时针
border-radius:50%; 圆形
2.box-shadow用于添加阴影效果
box-shadow：none|[inset? && [<offset-x><offset-y><blur-radius>?<spread-radius>?<color>?]]#
inset：设置对象的阴影类型为内阴影。该值为空时，则对象的阴影类型为外阴影
<offset-x>: 这是第一个 length值设置水平偏移量，如果是负值则阴影位于元素左边。
<offset-y>: 这是第二个 length值设置垂直偏移量，如果是负值则阴影位于元素上面。
<blur-radius>:这是第三个 length值。值越大，糊糊面积越大，阴影就越大越淡。 不能为负值。默认为0，此时阴影边缘锐利。
<color>：设置对象的阴影的颜色。
3.text-shadow为文字添加阴影
textshadow：none | [inset? && [ <offset-x> <offset-y> <blur-radius>?<color>? ] ]#
inset：设置对象的阴影类型为内阴影。该值为空时，则对象的阴影类型为外阴影
<offset-x>: 这是第一个 length值设置水平偏移量，如果是负值则阴影位于元素左边。
<offset-y>: 这是第二个 length值设置垂直偏移量，如果是负值则阴影位于元素上面。
<blur-radius>:这是第三个 length值。值越大，糊糊面积越大，阴影就越大越淡。 不能为负值。默认为0，此时阴影边缘锐利。
<color>：设置对象的阴影的颜色。
一个demo:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.rectangle
border:1px solid;
width:100px;
height:100px;
border-radius:10px;
box-shadow: 10px 10px 5px #888;
text-shadow:1px 1px 2px red;
</style>
</head>
<body>
<div class="rectangle">这是一个矩形</div>
</body>
</html>
以上是关于CSS动画DAY01的主要内容，如果未能解决你的问题，请参考以下文章