章节
问答
课签
笔记
评论
占位
占位

CSS3边框 圆角效果 border-radius

 border-radius是向元素添加圆角边框。

使用方法:

border-radius:10px; /* 所有角都使用半径为10px的圆角 */ 

border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角,顺时针 */ 

不要以为border-radius的值只能用px单位,你还可以用百分比或者em,但兼容性目前还不太好。

实心上半圆:

方法:把高度(height)设为宽度(width)的一半,并且只设置左上角和右上角的半径与元素的高度一致(大于也是可以的)。

div{
    height:50px;/*是width的一半*/
    width:100px;
    background:#9da;
    border-radius:50px 50px 0 0;/*半径至少设置为height的值*/
    }

实心圆:
方法:把宽度(width)与高度(height)值设置为一致(也就是正方形),并且四个圆角值都设置为它们值的一半。如下代码:

div{
    height:100px;/*与width设置一致*/
    width:100px;
    background:#9da;
    border-radius:50px;/*四个圆角值都设置为宽度或高度值的一半*/
    }

 

任务

怎么样,制作“实心上半圆”画法学会了,是否会举一反三制作一个“实心左半圆形”呢?

在右边窗口编辑区的第18行进行操作,将DIV变成左半圆形。

?不会了怎么办
border-radius:50px 0 0 50px;
||
1
2
<!doctype html>
<html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
提交
重置代码
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

收藏课程后,能更快找到我哦~

使用 Ctrl+D 可将课程添加到书签

邀请您关注公众号
关注后,及时获悉本课程动态

举报

0/150
提交
取消
全部 精华 我要发布

已采纳回答 / 我天亮就走
不是必须放到同一个文件夹内,但是内联路径的时候一定要做好相对路径的设置。

最新回答 / 少不知愁
根据数学原理来讲,在一个矩形内画一个半圆。以一条长边的中点为圆的圆点,那么圆的半径r应该=矩形长的1/2=矩形的宽

最新回答 / 慕莱坞6361999
其实现在在class唯一的情况下,可以直接写 .circle{}也是可以的

最新回答 / 薄荷青年
<!doctype html><html><head><meta charset="utf-8"><title>border-radius</title><style type="text/css">/*任务部分*/   div.semi-circle{     height:100px;    width:50px;    background:blue;       border-radius:50px 0 0 50p...

最新回答 / weixin_慕用8386340
代码没加分号

最赞回答 / 慕斯8308057
突然又知道了 不用理我

已采纳回答 / K冰封承諾
可以这样理解:div是标签选择器,.circle 是类选择器组合在一起其实是交叉选择器,意思是:选择 div 标签中 class 为 circle 的元素类似的有 E#idName注意:它们之间没有空格哦

已采纳回答 / 好吧真的不知道取什么名字
360浏览器有两种模式,一种是极速模式有的是 chrome的内核,这种支持css3也就是会显示圆角50像素。第二种是兼容模式,用的是IE内容它不支持css3所以就不能解析圆角代码。以上回答希望对你有所帮助

已采纳回答 / 竹韵松涛
border-ridius:0

已采纳回答 / 慕神2706593
相对定位是相对于自身原有位置进行便宜,仍处于标准文档流中。局对定位脱离了文档流,偏移的参照基准是:有已定位的父元素以父元素为基准,无父元素(即无position)的话以<html>为基准。无定位的absolute元素可以使用margin定位

最新回答 / 慕粉3791347
如果两个边框值大于或等于半径且相等,则默认为半径值,如半径为50px,设置(80px 0 0 50px);则将80默认为50px,而50px=80-50=30px效果为(50px 0 0 30px),若相差大于半径,则最大的默认为半径,其他的按比例来显示

已采纳回答 / imaginationME
border-radius:单个值是表示四个角都圆50px, border-radius:50px 50px 0px 0px;表示左上角 右上角分别是50px 右下角 左下角 分别是0px

最新回答 / 家都快没了还在打
直接输出1px就可以啦

最赞回答 / gucheng
<html><title>圆角按钮@gusion</title><head><style type="text/css"> .circle{height:100px;width:100px;border-radius:50px;border:0px;}</style></head><body><button type="button" class="circle" >圆角按钮</button&...

最新回答 / 灬诺诺
50px;0px;0px;50px; 分号改为空格(最后一个不该)
全部 我要发布
最热 最新
只看我的

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

账号登录 验证码登录

遇到问题
忘记密码

代码语言