Partage d'exemples d'effets d'image de bordure et de bordure arrondie CSS3

Les points d'apprentissage de cet article sont les suivants :

• Bordure-rayon arrondi
• Boîte-ombre boîte-ombre
• Bordure-image

1. Arrondi border -radius

<div>border-radius 属性允许您为元素添加圆角边框！ </div>  
  
div {   
    width: 200px;   
    height: 100px;   
    padding:20px;   
    border: 1px solid red;   
    border-radius : 25px;      
}

2. box-shadow

<div></div>  
  
div {   
    width: 200px;   
    height: 100px;   
    background: red;   
    /*x轴偏移量 y轴偏移量 模糊程度 阴影颜色*/   
    box-shadow: 10px 10px 5px #000;   
}

3. partie css

<p><b>注意: </b> Internet Explorer 不支持 border-image 属性。</p>  
<p> border-image 属性用于设置图片的边框。</p>  
  
<div id="round">这里，图像平铺（重复）来填充该区域。</div>  
<br>  
<div id="stretch">这里，图像被拉伸以填充该区域。</div>  
  
<p>这是我们使用的图片素材：</p>  
<img src="images/border.png" />

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!