[CSS揭秘]自适应的椭圆

技巧：利用border-radius属性产生圆，椭圆等形状

声明：博客园代码编辑器把内联样式里的border-radius给过滤了，所以页面上看不到椭圆效果。

border-radius按照顺序依次设定border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius

没有继承性，适用于CSS动画。border-radius可以单独指定水平半径和垂直半径，中间用一个斜杠/分隔。

当任意两个相邻圆角的半径之和超过border-box的尺寸时，用户代理必须按照比例减小各个边框半径所使用的值，直到它们不会互相重叠。

border-radius不仅可以接受长度值，还可以接受百分比值。这个百分比是基于元素的尺寸进行解析的，垂直半径的百分比是相对元素的高度进行解析，水平半径的百分比是相对于元素的宽度进行解析。

本质理解：border-radius是对元素的border-box进行切圆角处理，边框外侧的拐角作为切圆角的基准，边框内侧的圆角会稍微小一些。严格来说是max(0, [border-radius]-[border-width])

常规图形

1.朝上的半椭圆

border-radius: 50% / 100% 100% 0 0;

当某一个方向的半径为0时，另外一个方向的半径可以是任意值。

2. 朝左的半椭圆

border-radius: 100% / 50% 0 0 50%;

3. 四分之一的椭圆

border-radius: 100% 0 0 0;

作品欣赏

http://simurai.com/archive/buttons

展示了各种奇妙的形状

参考案例地址

play.csssecrets.io/quarter-ellipse

play.csssecrets.io/half-ellipse

play.csssecrets.io/ellipse

时间： 2024-10-13 08:29:12

[CSS揭秘]自适应的椭圆的相关文章

CSS揭秘

第1章引言第2章背景与边框第3章形状第4章视觉效果第5章字体排印第6章用户体验第7章结构与布局第8章过渡与动画第1章引言 Web标准:是敌还是友 CSS编码技巧第2章背景与边框 1 半透明边框 2 多重边框 3 灵活的背景定位 4 边框内圆角 5 条纹背景 6 复杂的背景图案 7 伪随机背景 8 连续的图像边框第3章形状 9 自适应的椭圆 10 平行四边形 11 菱形图片 12 切角效果 13 梯形标签页 14 简单的饼图第4章视觉效果 15 单侧投

常见css垂直自适应布局（css解决方法）

css3的盒模型 <!DOCTYPE html> <html > <head> <title>div + css宽度自适应(液态布局)</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> /*左边栏,设定宽度*/

[css 揭秘]：CSS揭秘技巧（四）：边框内圆角

我的github地址:https://github.com/FannieGirl/ifannie/ 源码都在这上面哦! 喜欢的给我一个星吧边框内圆角问题:有时候我们需要一个容器,只在内侧有圆角,而边框或描边的四个角在外部仍然保持直角的形状. 其实,以前我都是用两个div实现的. 解决方案如果只需要达成简单的实色效果,我们还可以通过其他的方法. 描边并不会跟着元素的圆角走(因而可以实现外层是直角),box-shadow 却是会的,因此把两者叠加到一起,box-shadow 会刚好填补描边

[css 揭秘]：CSS揭秘技巧（二）：多重边框

我的github地址:https://github.com/FannieGirl/ifannie/ 源码都在这上面哦! 喜欢的给我一个星吧多重边框问题:我们通常希望在css代码层面以更灵活的方式来调整边框样式方案一:box-shadow 目前为止,我们大多数人可能已经用过(或者滥用过)box-shadow来生成投影,不太为人之的是,它还接受四个参数(扩张半径),通过制定正值或负值,可以让投影面积加大或者减小, 用它的好处是它支持逗号分隔语法,我们可以创建任意数量的投影知识背景:box-s

CSS揭秘--写在结尾处

路漫漫,其修远兮;吾将上下来求索. 日读CSS揭秘有感:文档结构与样式的分离. 有时候为了表达出某种样式,不得不往文档里添加额外的标签.很无奈是不是,文档套的层数就像裹脚的布一样,z-index的值能顶到天上.借鉴Lea verou的话说,追求极致的路没有极限.现在的CSS已经很完备了,大部分都不需要借助添加额外标签来实现样式,保持结构的清晰,保持样式的可维护都是有出路的. 不寄望自己能有她那样的水平,追随她的脚步,一步一步地向着文档结构和样式脱离的目标走吧.

根据兄弟元素的数量来设置样式(CSS揭秘学习笔记)

CSS揭秘学习笔记 li.length == 4 li:first-child:nth-last-child(4), li:first-child:nth-last-child(4) ~ li { /* 当列表正好包含四项时,命中所有列表项 */ } li.length >= 4 li:first-child:nth-last-child(n+4), li:first-child:nth-last-child(n+4) ~ li { /* 当列表至少包含四项时,命中所有列表项 */ } li.l

CSS 高度自适应

当html,body的高度为百分比时,<body>的高度根据父元素<html>来计算,<html>的高度根据可视窗口的高度度来计算,所以在上面的示例中 html,body{ height:100%; overflow:hidden;} 表示<html>.<body>的高度为整个内容可视窗口的高度,并且内容超出一屏时隐藏滚动条,而下面又使用了 body{ overflow:auto} 使得内容超出一屏幕时<body>的滚动条能够显示.所

纯CSS制作自适应分页条-分享------彭记（019）

纯css制作自适应分页条效果图: html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-wi

移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 )

序言:应朋友要求随手写了一下移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 ) ,以备后用 LESS代码: .adaptive-circle { margin: 50px auto 0; width: 80%; height: 0; padding-top: 80%; border-radius: 100%; border: 1px solid #000; box-sizing: border-box; // for .layout { height: 100%; } positi