border-radius 使用技巧

border-radius

总所周知：border-radius是设置dom元素的圆角属性，熟为人知的操作是

border-radius: 1px 2px 3px 4px

其中值分别代表了左上、右上、右下、左下的圆角程度
有图有真相（滑稽）

其还可以接收%的使用

这里有个一个不为人知的小知识，border-radius可以单独指定水平和垂直半径。通过斜杠(/)分隔两个值即可。

第一个值是x，第二个值是y（斜杠 / 后的值）。
当border-radius值为10px / 5px 20px，
其效果相当于10px 10px 10px 10px / 5px 20px 5px 20px
还是很难理解？
看下面两幅图

画图太麻烦了，第二张图我就展示了一下border-radius的值，这里感觉和第一张图有冲突，因为第二张图中border-radiusx标明的是100%，但是为什么只有一般的高度呢，而第一张图中标明了50%，可是占整个半圆呢。
因为我们要注意border-radius分解成top-left、top-right、bottom-right、bottom-left，第二张图中x占用了100%，即整个dom的宽度，所以角度会出现向上移动。
这里做几个案例，分别为椭圆、半圆；
效果图：

代码：

<style>div[class^="box"] {width: 100px;height: 50px;margin: 20px auto;background: yellowgreen;}.box {border-radius: 50%;}div.box1 {border-radius: 50px / 25px;}div.box2 {border-radius: 100% 0 0 100% / 50%;}div.box3 {border-radius: 50% / 100% 100% 0 0;}</style><div class="box"></div><div class="box1"></div><div class="box2"></div><div class="box3"></div>

border-radius 使用技巧相关推荐

如何使用CSS3 Border Radius属性
With CSS3, you can give any element "rounded corners" by using the border-radius property. ...
提高你css技能的css开发技巧
好久没整理博客了进来啰嗦两句继续抄别人的博客一.resize实现图片对比 resize的语法如下: resize:none | both | horizontal | vertical 案例 ...
Tailwind Border
边框半径(border radius) border-redius属性用于为元素设置圆角边框,可使用border-*-radius设置四个方位的圆角.圆角的设置是通过使用半径实现的,当使用一个半径时可 ...
figma下载_Figma的自动版式实用
figma下载 Figma's Auto Layout has been around for a while, but not everyone's aware of the benefits it ...
tailwind css_什么是Tailwind CSS，如何将其添加到我的网站或React App中？
tailwind css CSS is a technology that can be your best or worst friend. While it's incredibly flexib ...
6个原则、50条秘技提高HTML5应用及网站性能
Jatinder Mann是微软Internet Explorer产品的一名项目经理,在BUILD 2012大会上,他做了题为"提高HTML5应用和网站性能的50条秘技(50 perform ...
iOS 图形处理翻译
2019独角兽企业重金招聘Python工程师标准>>> 原文的题目是 Designing for iOS: Graphics & Performance, ---Begin- ...
ye321片库_jQuery的简约幻灯片库
ye321片库 View demo 查看演示Download Source 下载源 In today's tutorial we will create a simple and beautiful ...
css参考手册css3手册_CSS手册：面向开发人员CSS便捷指南
css参考手册css3手册 I wrote this article to help you quickly learn CSS and get familiar with the advanced ...
大漠老师：2022 年的 CSS，到底有哪些特性
点击上方前端Q,关注公众号回复加群,加入前端Q技术交流群关于2022年的CSS新特性,自己之前也有篇原创,CSS 的未来:Cascade Layers (CSS @layer),专门是在介绍@l ...

border-radius 使用技巧

border-radius

border-radius 使用技巧相关推荐

最新文章

热门文章