css怎么设置div圆角 css如何设置圆角

主机教程 建站分享 2年前 (2022-11-24) 238次浏览

文章摘要:css怎么设置div圆角 css如何设置圆角

css设置div圆角的方法: 在css中可以通过设置border-radius让div边角变得圆润。 示例: […]

css设置div圆角的方法:

在css中可以通过设置border-radius让div边角变得圆润。

示例:

<!DOCTYPE html>

<html>

<head>

<style> 

#rcorners1 {

  border-radius: 25px;

  background: #73AD21;

  padding: 20px; 

  width: 200px;

  height: 150px;  

}

#rcorners2 {

  border-radius: 25px;

  border: 2px solid #73AD21;

  padding: 20px; 

  width: 200px;

  height: 150px;  

}

#rcorners3 {

  border-radius: 25px;

  background: url(/i/paper.jpg);

  background-position: left top;

  background-repeat: repeat;

  padding: 20px; 

  width: 200px;

  height: 150px;  

}

</style>

</head>

<body>

<h1>border-radius 属性</h1>

<p>拥有指定背景颜色的元素的圆角:</p>

<p id="rcorners1">Rounded corners!</p>

<p>带边框元素的圆角:</p>

<p id="rcorners2">Rounded corners!</p>

<p>拥有背景图片的元素的圆角:</p>

<p id="rcorners3">Rounded corners!</p>

</body>

</html>


声明:
若非注明,本站文章源于互联网收集整理和网友分享发布,如有侵权,请联系站长处理。
文章名称:css怎么设置div圆角 css如何设置圆角
文章链接:http://www.7966.org/post/13523.html
转载请注明出处

喜欢 (0)