border-radius的使用

border-radius的基本使用，使用border-radius画半圆

在日常项目过程中，border-radius这个属性算是非常常用的属性之一了，通过设置元素的border-radius值，可以轻松给元素设置圆角边框，甚至实现绘制圆、半圆、四分之一的圆等各种圆角图形。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>border-radius的使用</title></head><body><div class="demo"></div><div class="semicircle"></div><style>.demo{width:200px;height:200px;border:1px solid #ccc;background-color:#f60;margin: 50px auto;/*100表示X轴的 50px表示y轴的*/border-top-left-radius:100px 50px;border-top-right-radius: 50%;border-bottom-left-radius:60px;border-bottom-right-radius:60px;/*等于 顺时针方向*//*border-radius: 50% 50% 60px 60px;*/}.semicircle{width:200px;height:100px;margin:50px auto;background-color:pink;border-radius: 0 0 100px 100px;}</style></body>
</html>

border-radius的数值有三种表示方法：px、%、em，对于border-radius的值的设置，我们常用的有三种写法

1设置一个值如下
border-radius:10px;表示上下左右都是10px

2设置四个值
border-radius属性其实是border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius四个属性的简写模式，因此，border-radius : 30px;，其实等价于border-radius : 30px 30px 30px 30px;（ps：与padding和margin一样，各个数字之间用空格隔开）。
注/100表示X轴的 50px表示y轴的/
border-top-left-radius:100px 50px;
　　这里要注意四个数值的书写顺序，不同于padding和margin的“上、右、下、左”的顺序，border-radius采用的是左上角、右上角、右下角、左下角的顺序

3.省略部分值
border-radius:50px 0;表示border-top-left-radius 50px、border-top-right-radius 0、border-bottom-right-radius 50px、border-bottom-left-radius 0px

border-radius完整结构形式（扩展了解一下，个人感觉好像用不到）
　　在W3C上查border-radius属性时，会发现上面描述的语法是这样的：

border-radius: 1-4 length|% / 1-4 length|%;
　　这是什么意思呢，我也看不懂，后来百度了解到，这是border-radius的完整写法，我们平时的写法其实都是简写，平时我们写的border-radius : 50px，其实完整的写法应该是：

border-radius : 50px 50px 50px 50px / 50px 50px 50px 50px;
/前四个表示x轴，后四个边上y轴，数值越大变的越小/
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
　　“/”前的四个数值表示圆角的水平半径，后面四个值表示圆角的垂直半径，什么是水平半径和垂直半径呢，见下图

border-radius的使用相关推荐

如何使用CSS3 Border Radius属性
With CSS3, you can give any element "rounded corners" by using the border-radius property. ...
Tailwind Border
边框半径(border radius) border-redius属性用于为元素设置圆角边框,可使用border-*-radius设置四个方位的圆角.圆角的设置是通过使用半径实现的,当使用一个半径时可 ...
bootstrap怎么用_不用自己写css，不用bootstrap，写样式有tailwindcss就足够了
很多前端开发者不喜欢写css, 因为对一些属性不熟悉调试起来很费劲.还有一些开发者会选择使用一些css库,比如bootstrap, 但是bootstrap是高度定制的,写出来的风格可能并不符合设计稿. ...
DropZone（文件上传插件）
1. html文件 dropzone的原理是模拟表单来上传文件,html中的元素有多重形式. 可以建立一个form表单: 1 2 3 <form id="dropz" act ...
推荐13个CSS3快速开发工具
有了下面这些工具,你可以快速方便地掌握css3 并利用它构建页面效果: 1. CSS3 Pie 2. CSS3 Builder 3. CSS3 Drop shadow generator 4. Cas ...
深入理解浏览器解析和执行过程
在我们公司的业务场景中,有很大一部分用户是使用老款安卓机浏览页面,这些老款安卓机性能较差,如果优化不足,页面的卡顿现象会更加明显,此时页面性能优化的重要性就凸显出现.优化页面的性能,需要对浏览器的渲染 ...
在线生成 CSS3 的工具
1) CSS Creator – Layout Design 2) CSS Menu Maker 3) CSS3 Please 4) CSS3 Generator 5) CSS Border Radi ...
推荐10个很棒的 CSS3 开发工具
CSS3 是对 CSS 规范的一个很大的改善和增强,它使得 Web 开发人员可以很容易的在网站中加入时尚的效果.尽管如此,有几个工具可以在你使用 CSS3 制作网站的时候起到很好的帮助作用.在这篇文章 ...
24款非常实用的CSS3工具终极收藏
对于Web设计和开发人员来说,CSS是非常重要的一部分,随着越来越多的浏览器对CSS3的支持及不断完善,设计师和开发者们有了更多的选择.如今,用纯CSS就可以实现各种各样很酷的效果,甚至是动画.今天这 ...
【收藏】13个CSS3快速必备开发工具
有了下面这些工具,你可以快速方便地掌握css3 并利用它构建页面效果: 1. CSS3 Pie 2. CSS3 Builder 3. CSS3 Drop shadow generator 4. Cas ...

border-radius的使用

border-radius的基本使用，使用border-radius画半圆

border-radius的使用相关推荐

最新文章

热门文章