CSS3新增UI样式-有客帮

圆角，border-radius: 1-4个数字/1-4个数字，前面是水平，后面是垂直，不给“/”表示水平和垂直一样，举例如下：

<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<title>无标题文档</title>
<style>
　　 // 如果是两个数字，则左上角和右下角一样，右上角和左下角一样
.box{width:200px;height:200px;border:1px solid #000; border-radius:20px;}
</style>
</head>
<body>
<div class=”box”></div>

</body>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<title>无标题文档</title>
<style>
// 100px/150px表示每个角的水平和垂直，同时可以前面四个/后面四个，则分别表示四个角的水平和四个角的垂直
.box{width:200px;height:300px;border:1px solid #000;border-radius:100px/150px;}
</style>
</head>
<body>
<div class=”box”></div>

</body>

边框背景
2. <head>
3. <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
4. <title>无标题文档</title>
5. <style>
6. .box{width:200px;height:60px; -webkit-border-image:url(bt_blue.png) 0 10;border-left-width:10px;border-right-width:10px;}
7. </style>
8. </head>
9. <body>
10. <div class=”box”></div>
  
  </body>
11. 线性渐变
  
  <head>
  
  <meta http-equiv=”Content-Type” content=”textml; charset=utf-8″>
  
  <title>无标题文档</title>
  
  <style>
  
  .box{width:300px;height:300px;border:10px solid #000; background-image:-webkit-linear-gradient(60deg,red,blue);}
  
  </style>
  
  </head>
  
  <body>
  
  <div class=”box”></div>
  
  </body>
12. 可以设置多个背景
  
  <head>
  
  <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
  
  <title>无标题文档</title>
  
  <style>
  
  .box{width:300px;height:300px;background:url(bt_blue.png) no-repeat, url(border.png) repeat-y right 0;}
  
  </style>
  
  </head>
  
  <body>
  
  <div class=”box”></div>
  
  </body>
13. border-image:边框图片
14. border-image-source: 引入图片
15. border-image-slice: 切割图片
16. border-image-width: 边框宽度
17. border-image-repeat: 图片的排列方式（round 平铺， repeat 重复， stretch 拉伸）
18. border-colors：边框颜色
19. 背景尺寸： background-size: x, y (100% 100%)
20. background-origin: border | padding | content -box，分别表示从border区域开始显示背景，从padding区域开始显示背景，从content区域开始显示背景
21. border-clip : border(从border区域向外裁剪背景)， padding(从padding区域向外裁剪背景)，content(从content区域向外裁剪背景)
遮罩

转载请注明：有客帮 » CSS3新增UI样式

与本文相关的文章