border-radius:50%及超过50%的表现形式
web DIV+CSS 2020-07-23 44 0
关于本站

淘淘IT

记录工作学习中的点点滴滴

本站创建于2017年,用于记录工作和学习中遇到的问题。同时,不断提升网站的使用体验,增加新的功能。

757162 1186 11
最新评论
@xiaoniba 好像是编码GBK和utf-8的区别,请看下我摘抄的一篇文章,里面有介绍http://taotaoit.com/article/details/885.html,你可以尝试下是否可以
评 tp5.1中字段别名是汉字,提示错误:不支持的数据表达式
\x7f-\xff 这个匹配什么东东,会不会出现安全问题??? 改成这样如何 if ($strict && !preg_match('/^[\w\.\*\x{4e00}-\x{9fa5}]+$/u', $key)) {
评 tp5.1中字段别名是汉字,提示错误:不支持的数据表达式
完美解决 牛逼
评 tp5.1中字段别名是汉字,提示错误:不支持的数据表达式
评 tp5.1中字段别名是汉字,提示错误:不支持的数据表达式
完美解决
评 tp5.1中字段别名是汉字,提示错误:不支持的数据表达式
文章标签更多
ThinkPHP (119)
Mysql (25)
DedeCms (28)
jQuery (27)
证件照 (1)
setInc (3)
setDec (3)
onclick (3)
打开边栏(ESC) 关闭边栏(ESC)
border-radius:50%和100%的区别
50%与100%表现一样是因为当临角两个弧半径之和超过临接边的长度时,浏览器会按照两个半径的比例缩小至刚好等于临接边的长度。

比如:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试border-radius</title>
    <style>
        body{
            width: 100%;
            height: 100%;
        }

        .container {
            margin: 0 auto;
            width: 500px;
            height: 500px;
            border: 1px solid;
        }
        .circle{
            width: 100px;
            height: 100px;
            margin: 10px;
            background: #1d90e6;
        }
        .circle-1 {
            /*1:1 50px + 50px = 100px*/
            border-top-right-radius: 100%;
            border-bottom-right-radius: 100%;
        }

        .circle-2 {
            border-top-right-radius: 50%;
            border-bottom-right-radius: 50%;
        }

        .circle-3 {
            /*2:3 -> 40px + 60px = 100px*/
            border-top-right-radius: 60%;
            border-bottom-right-radius: 90%;
        }

    </style>
</head>
<body>
    <div class="container">
        <div class="circle circle-1">

        </div>

        <div class="circle circle-2">

        </div>

        <div class="circle circle-3">

        </div>
    </div>
</body>
</html>
from clipboard

.circle-3 {
	/*2:3 -> 40px + 60px = 100px*/
	border-top-right-radius: 60%;
	border-bottom-right-radius: 90%;
}
/*相当于*/
.circle-4 {
	/*2:3 -> 40px + 60px = 100px*/
	border-top-right-radius: 40%;
	border-bottom-right-radius: 60%;
}

参考链接
https://zhuanlan.zhihu.com/p/20128284

版权声明:本篇文章来源于网络。 来源链接

相关推荐
css通过父元素选择子元素,选择第一个,第二个,最后一个,奇数偶数
DIV+CSS | 2017-07-27 1081
:first-child 选择器 选择属于其父元素的首个子元素的每个 <p> 元素,并为其设置样式: p:first-child { background-color:yellow; } 例子1 选择列表中的第一个 <li> 元素并设置其样式: li:first-child { backgroun...
&nbsp|&quot|&amp|&lt|&gt等html字符转义
DIV+CSS | 2017-05-18 944
提示:请直接按CTRL+F搜索您要查找的转义字符。 常用表: No. 文字表記 10進表記 16進表記 文字   Comment ...
评论:0条
评论加载中...
发表评论