CSS3圆角边框和界限照片实际效果案例

日期:2021-03-03 类型:科技新闻 

关键词:商城网站建设,微商好助手,微商引流,电商网站模板,微信商家小程序

本文的学习培训关键点以下:

 •圆角 border-radius
 •盒黑影 box-shadow
 •界限照片 border-image
 
1.圆角 border-radius

XML/HTML Code拷贝內容到剪贴板
  1. <div>border-radius 特性容许您为元素加上圆角边框! </div>  
  2.   
  3. div {   
  4.     width: 200px;   
  5.     height: 100px;   
  6.     padding:20px;   
  7.     border: 1px solid red;   
  8.     border-radius : 25px;      
  9. }   

2.盒黑影 box-shadow

XML/HTML Code拷贝內容到剪贴板
  1. <div></div>  
  2.   
  3. div {   
  4.     width: 200px;   
  5.     height: 100px;   
  6.     background: red;   
  7.     /*x轴偏位量 y轴偏位量 模糊不清水平 黑影色调*/   
  8.     box-shadow: 10px 10px 5px #000;   
  9. }   
  10.   

3.界限照片 border-image

html一部分

XML/HTML Code拷贝內容到剪贴板
  1. <p><b>留意: </b> Internet Explorer 不适用 border-image 特性。</p>  
  2. <p> border-image 特性用于设定照片的边框。</p>  
  3.   
  4. <div id="round">这里,图象平铺(反复)来填充该地区。</div>  
  5. <br>  
  6. <div id="stretch">这里,图象被拉伸以填充该地区。</div>  
  7.   
  8. <p>这是大家应用的照片素材:</p>  
  9. <img src="images/border.png" />  
  10.   

css一部分

CSS Code拷贝內容到剪贴板
  1. div {   
  2.     width250px;   
  3.     padding10px 20px;   
  4.     border15px solid translate;   
  5. }   
  6. #round {   
  7.     /*safari*/  
  8.     /*照片源 照片界限向内偏位量 照片的宽度 用于特定在边框外界绘图 border-image-area 的量  款式*/  
  9.     -webkit-border-image : url(../images/border.png) 30 30 round;   
  10.     /*opera*/  
  11.     -o-border-image : url(../images/border.png) 30 30 round;   
  12.     border-image : url(../images/border.png) 30 30 round;   
  13. }   
  14.   
  15. #stretch {   
  16.     -webkit-border-image : url(../images/border.png) 30 30 stretch;   
  17.     -o-border-image : url(../images/border.png) 30 30 stretch;   
  18.     border-image : url(../images/border.png) 30 30 stretch;   
  19. }   
  20.   

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。