css边框变圆角边框怎么写
时间:2021-11-20
来源:互联网
今天PHP爱好者为您带来写法:1、给边框添加“border-radius:圆角值;”样式统一设置圆角大小;2、添加“border-top-left-radius:圆角值;”、“border-top-right-radius:圆角值;”等样式分别设置四角圆角大小。希望对大家有所帮助。
本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。
css边框变圆角边框的写法
圆角边框(border-radius)的基本用法:border-radius 属性是一个简写属性,用于设置四个圆角的属性。
圆角边框的最基本用法就是设置四个相同弧度的圆角
border-top-left-radius:30px; //左上角
border-top-right-radius:30px; //右上角
border-bottom-left-radius:30px; //右下角
border-bottom-right-radius:30px; //左下角
如果这四个弧度的圆角相同,可以写成:
border-radius:30px;
例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.p1{
margin:0 auto;
background: darkcyan;
width:200px;
height:200px;
border:2px solid darkslategray;
border-radius:30px;
text-align: center;
line-height: 200px;
}
</style>
</head>
<body>
<p class="p1">圆角边框</p>
</body>
</html>
输出结果:
以上就是css边框变圆角边框怎么写的详细内容,更多请关注php爱好者其它相关文章!
-
纸嫁衣3彤彤欠了什么债-彤彤与申墨卿爱情故事解析 时间:2025-07-03
-
解限机矛隼新手玩法技巧分享_解限机矛隼新手玩法技巧推荐 时间:2025-07-03
-
纸嫁衣3彤彤欠了什么债-彤彤与申墨卿爱情故事解析 时间:2025-07-03
-
鸣潮弗洛洛突破材料汇总_鸣潮弗洛洛突破材料一览 时间:2025-07-03
-
bcrypt.dll未能启动的原因及解决办法 bcrypt.dll怎么修复 时间:2025-07-03
-
斗罗大陆猎魂世界魂兽怎么选-强力魂兽推荐 时间:2025-07-03
今日更新
-
css如何固定导航栏
阅读:18
-
Win10系统下怎么将VSCode配置到右键菜单中
阅读:18
-
聊聊Laravel Carbon扩展包的作用及用法
阅读:18
-
jquery中hover方法作用是什么
阅读:18
-
如何解决jquery bind失效问题
阅读:18
-
分析TP6的多应用与TP5的区别
阅读:18
-
html的a标签怎么设置字体颜色
阅读:18
-
jquery中$啥意思
阅读:18
-
jquery height()的用法是什么
阅读:18
-
jquery是不是mvc
阅读:18