页面中为了美观 ， 会给边框设置圆角 ， 今天 ， 我给大家介绍下css如何设置边框圆角
文章插图
需要这些哦
css+html
代码编纂器（本文用的HBuilder）
方式/
1打开编纂器 ， 新建一个border.html,用来讲解今天的内容
文章插图
2在页面的body区域内 ， 新建一个名为test的div
文章插图
3在css标签里 ， 给test 设置宽200px ， 高200px ， 黑色边框和居中对齐
文章插图
4在编纂器中打开border.html,可以看到此刻边框是直角
文章插图
5回到编纂器 ， 在css给test加上border-radius:8px属性
文章插图
6再次在浏览器中打开border.html,发现边框的直角已经酿成圆角
文章插图
7贴一下代码 ， 供参考：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css若何设置边框圆角</title>
</head>
<style>
.test{
width: 200px;
height: 200px;
border: 1px solid #000000;
margin: 0 auto;
border-radius:8px;
}
</style>
<body>
<div class="test">
</div>
</body>
【css如何设置边框圆角】</html>
注重事项border-radius的值越大 ， div会变的像一个圆
border-radius的值为div大小的一半时 ， div会酿成一个圆
若是帮忙到您 ， 请给个赞哦
以上内容就是css如何设置边框圆角的内容啦 ， 希望对你有所帮助哦！
推荐阅读
- wpsppt中如何制作大气简约通用型目录样式
- wps演示中如何进行纯文字排版
- 公众号如何设置赞赏回复
- wps演示中如何进行六边形纯文字排版
- php如何获得上一季度的开始时间和结束时间
- wps演示中如何进行新月形图文排版
- 如何使用AE CS6制作渐变文字
- 如何训练玳瑁天竺鼠
- 如何训练灰鼠
- 创造与魔法狼吃什么饲料？如何捕捉