码迷,mamicode.com
首页 > Web开发 > 详细

CSS动画DAY01

时间:2019-08-27 20:59:46      阅读:103      评论:0      收藏:0      [点我收藏+]

标签:border   css   rectangle   set   对象   bsp   sha   ext   char   

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

标签:border   css   rectangle   set   对象   bsp   sha   ext   char   

原文地址:https://www.cnblogs.com/547hh/p/11420701.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!