Maison > interface Web > tutoriel CSS > Partage d'exemples d'effets d'image de bordure et de bordure arrondie CSS3

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

高洛峰
Libérer: 2017-03-08 13:39:31
original
1946 Les gens l'ont consulté

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;      
}
Copier après la connexion

2. box-shadow

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

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" />
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal