你的位置:首页 > 网页设计

[网页设计]CSS3样式中新添加的属性


border-radius:允许向元素添加圆角

<style type="text/css">    #r1{      border-radius:25px;      background:blue;      padding:20px;      width:200px;      height:150px;    }    #r2{      border-radius:25px;      border:2px solid green;      padding:20px;      width:200px;      height:150px;    }    #r3{      border-radius:25px;      background:url("img/1.jpg");      background-position:left top;      background-repeat:repeat;      padding:20px;      width:200px;      height:150px;    }      </style> </head>  <body>   <form action="" id="myform" >      <p>border-radius </p>      <p>指定背景颜色圆角</p>      <p id="r1">圆角</p>      <p>指定边框元素圆角</p>      <p id="r2">圆角</p>      <p>指定背景图片圆角</p>      <p id="r3">圆角</p>  </form> </body>

box-shadow:阴影

<style type="text/css">    #div1{      width:200px;      height:100px;      background:yellow;      box-shadow:10px 10px 5px 5px gray;/* 阴影*/    }    #div2{      width:200px;      height:100px;      background:yellow;      box-shadow:10px 10px 5px 5px inset;/* 阴影 inset内阴影*/    }      </style> </head>  <body>   <div id="div1">      外阴影  </div>  <div id="div2">      内阴影  </div> </body>

设置多层阴影

box-shadow:10px 10px 5px 5px gray,15px 15px 5px 5px blue,20px 20px 5px 5px gray;/* 多层阴影*/

border-image属性用于设置图片边框

<style type="text/css">    div{      width:250px;      padding:10px 20px;      border:15px solid transparent;    }    #round{      -webkit-border-image:url("img/1.jpg") 30 30 round; /* -webkit是google浏览器内核支持所需要 ,round是平铺的意思*/      -o-border-image:url("img/1.jpg")30 30 round;/* -o是Opera浏览器内核支持所需要的前缀*/      border-image:url("img/1.jpg")30 30 round;    }    #stretch{      -webkit-border-image:url("img/1.jpg") 30 30 stretch; /* -webkit是google浏览器内核支持所需要 stretch是拉伸 */      -o-border-image:url("img/1.jpg")30 30 stretch;/* -o是Opera浏览器内核支持所需要的前缀*/      border-image:url("img/1.jpg")30 30 stretch;    }      </style> </head>  <body>   <p>border-image属性用于设置图片的边框</p>   <div id="round">     这里图像平铺来填充该区域   </div>   <br>   <div id="stretch">     这里图片拉伸以填充该区域   </div>   <p>这里是我们使用的图片素材</p>   <img src="img/1.jpg">