HTML5渐变与边框样式实现代理-优快云博客

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="utf-8" />

  <title>html5</title>
  <style type="text/css">
/*<![CDATA[*/
  #a1
  {
  width:200px;
  height:200px;
  background:-webkit-linear-gradient:top rgba(255,255,255,0.7) rgba(0,0,255,1);
  border:5px rgba(255,0,0,0.7) solid;
  }
  #a2
  {
  width:200px;
  height:200px;
  background:-webkit-linear-gradient:top rgba(255,255,255,0.7) rgba(0,0,255,1);
  border:5px rgba(255,0,0,0.7) solid;
  border-radius:50px;
  box-sizing:border-box;//盒子模型
  }
  #a3
  {
  width:200px;
  height:200px;
  background:-webkit-linear-gradient:top rgba(255,255,255,0.7) rgba(0,0,255,1);
  border:5px rgba(255,0,0,0.3) solid;
  border-radius:80px;
  box-sizing:border-box;//盒子模型
  box-shadow:rgba(0,0,0,0.7) 30px 30px 10px;//盒子阴影
  }
  #a4
  {
  width:200px;
  height:200px;
  background:-webkit-linear-gradient:top rgba(255,255,255,0.7) rgba(0,0,255,1);
  border:5px rgba(255,0,0,0.3) solid;
  border-radius:100px;
  box-sizing:content-box;//盒子模型
  box-shadow:rgba(0,0,0,0.7) 30px 30px 10px;//盒子阴影
  }
  /*]]>*/
  </style>
</head>

<body>
  <div id="a1">
    <span>无盒子模型和盒子阴影</span>
  </div><br />

  <div id="a2">
    <span>有盒子模型:border-box</span>
  </div><br />

  <div id="a3">
    <span>有盒子模型:border-box和盒子阴影</span>
  </div><br />

  <div id="a4">
    <span>有盒子模型:content-box，盒子阴影和盒子倒影</span>
  </div><br />
</body>
</html>

转载于:https://www.cnblogs.com/java20130725/p/3215826.html