温馨提示×

css怎么设置div圆角

清风
535
2021-03-11 09:30:25
栏目: 编程语言

css怎么设置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>


0