CSS中四分之一圆的写法

2024-05-10 03:45:15

关于百度前端学院中task4四分之一圆的画法（基于CSS中画圆角的方法）

方法一：

设置宽高为100px，border-radius设置为50%（当然这里也可以设置为50px）

width:100px;height:100px;border-radius:50%;

因为使用的半径为边长的一半，故四个圆角的圆心重合在正方形对角线的交点处。因此做出来的是一个整圆，如要要显示为四分之圆，可以用相对或者绝对定位偏移一定的数值，将圆心定位到矩形顶角。而关键的地方就是要将超出矩形的四分之三圆隐藏，方法就是overflow：hidden；。

方法二：

border-radius设置四个值，此时top-left取第一个值，top-right取第二个值，bottom-right取第三个值.bottom-left取第四个值：

（本段摘抄自http://www.studyofnet.com/news/276.html）

.demo {

border-radius:10px 20px 30px 40px;

}

等价于：

.demo {

border-top-left-radius: 10px;

border-top-right-radius: 20px;

border-bottom-right-radius: 30px;

border-bottom-left-radius: 40px;

}

效果：

如上所述，要想设置为四分之一圆，则只用设置一个圆角的值即可。

具体设置方法：

左上的四分之一圆设置为：border-bottom-right-radius：50px；

右下的四分之一圆设置为：border-top-left-radius：50px；

效果如下图：

CSS中四分之一圆的写法相关推荐

Web前端入门：CSS中颜色三种写法
在CSS中,颜色的表示有三种写法,分别是: 英文单词 16进制 rgb+rgba 1.英文单词: 例如:red, white, blue, skyblue, pink, deeppink, ...
CSS 中的字体兼容写法：用CSS为英文和中文字体分别设置不同的字体
font-family的调用方法: font-family:Arial,'Times New Roman','Microsoft YaHei',SimHei; font:bold 12px/0.75e ...
html_css_四分之一圆
需求: 效果: 代码: <!DOCTYPE html> <html> <head><title>四分之一圆</title><style ...
在html中加入中文字体,中文字体在CSS中的写法整理
中文字体在CSS中的写法整理发布时间:2013-10-30 17:33:18 作者:佚名我要评论在CSS中不能出现中文字体,解决办法就是把这些中文字体名字转换成英文名,下面简要的为大家介 ...
CSS中几种中文字体的英文写法.
网页前端开发制作中经常我们需要用一些像微软雅黑,宋体等中文字体的情况,一般我们直接使用font-family:"微软雅黑"这样的写法,;以前还真没发现这有什么问题,直到今天折磨一上 ...
css圆在中心根据宽度缩放_根据CSS中的容器宽度重新缩放字体
css圆在中心根据宽度缩放 Introduction: 介绍: Dealing with fonts is a very interesting thing to do as fonts bring ...
CSS绘制形状（三角形、四分之一圆、半圆、圆、梯形、球体、菱形）
CSS绘制形状(三角形.四分之一圆.半圆.圆.梯形.球体.菱形) 三角形 div {width: 0;height: 0;border: 200px solid transparent;border- ...
html中hover的写法,在行内css中书写伪选择器:hover
我们知道直接写style可以把css属性直接作用到一个元素上,但是如果这个元素有:hover怎么办呢?还是只能写style吗?查看CSS的标准,你会发现这么一段描述: Setting properti ...
HTML中注释写法 CSS中注释写法,css注释怎么写?
什么是CSS注释?CSS文件中注释怎么写?本篇文章将向你介绍css注释的作用及写法,希望对各位有帮助. css注释怎么写? 一:css注释是什么? css注解(css 注解)又被称作CSS注释(css ...

最新文章

热门文章