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

CSS3-2

时间:2018-05-23 18:53:51      阅读:215      评论:0      收藏:0      [点我收藏+]

标签:tle   margin   htm   一个   otto   document   title   宽度   gre   

倒圆角

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>

<h1>圆角边框 —— border-radius IE9</h1>
<!-- border-radius 是复合属性 -->
border-radius: 20px;<!-- 四个角圆的半径为20px -->
border-radius: **px **px **px **px;<!-- 和padding,margin用法相同 -->
border-top-left:;
border-top-right:;
border-bottom-left:;
border-bottom-right:;
<!-- 还可以百分比变化 -->
border-radius: 50%;

<h1>阴影 —— box-shadow和text-shadow</h1>
box-shadow和text-shadow
box-shadow标准参数5个 IE9开始兼容
box-shadow: 6px 6px 10px 10px red;
向右偏移值 向下偏移值 模糊半径 延展宽度 颜色

box-shadow: 6px 6px 10px 10px red,
6px 6px 10px 10px blue,
inset 6px 6px 10px 10px yellow,
inset 6px 6px 10px 10px green;
<p>
注:
1.默认向外扩展阴影,如需向内,加 inset。
2.对于一个盒子,可以叠加使用阴影,并可以同时内外阴影。
</p>

text-shadow: 文字阴影 四个参数 少了延展值 IE10兼容
使用,同上。
  

</body>
</html>

 

CSS3-2

标签:tle   margin   htm   一个   otto   document   title   宽度   gre   

原文地址:https://www.cnblogs.com/hangege/p/9078181.html

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