border-radius属性(CSS设置)
border-radius属性(CSS设置)
css中给盒子设置圆角能够经过border-radius特点来实现(详细原理就不深入探讨了);
在开发过程中都会遇到浏览器兼容问题,这问题其实也不难处理,无非就是加上私有前缀,在这儿先疏忽掉.
border-radius有四个特点:
border-top-left-radius，//左上角
border-top-right-radius，//右上角
border-bottom-right-radius，//右下角
border-bottom-left-radius，//左下角
特点取值:初始值为0,能够取详细值,也可取值百分比(水平方向以宽度为基数,垂直方向以高度为基数)
下面是几种常见用法:
1.同时设置4个旮旯的形状的半径的时分不能超过50%;
2.设置两个值:
100px:设置的是左上角和右下角;
30px:设置的是右上角和左下角;
3.设置三个值:
100px:设置的是左上角;
50px:设置的是右上角和左下角;
30px:设置的是右下角;
4.设置4个值:
到了这儿大家应该就能够推论出4个值操控的次序了,没错,就是
左上-->右上-->右下-->左下;
border-radius:100px50px30px60px;
5.还有一种写法就是设置椭圆时比较常用:
border-radius:100px10px/100px10px;
"/"之前代表:toptopbottombottom
"/"之后代表:leftrightrightleft
说到设置椭圆好多人对这一写法都是比较懵懵的,很难澄清这一原理,刚开始的时分小胖在这儿也是一脸懵逼的研究这玩意儿,后来就想了一个简略的办法:
就是依据每条线减多少,然后两点之间画弧,因为看其他教程上的什么画图什么的,小胖是看不懂这些玩意的,所以只能想一个自己了解的法子了.
作品标签： 属性
优秀作品：
最新作品：
评论列表（共80人参与）参与讨论或分享设计作品获得视觉癖积分奖励
、微信没升注册会员
2021-07-08 10:59:52
禄滚。泼水节到了，泼泼泼福满多! 4、你被通缉了，你的罪过是：对朋友太好，又够义气，青春的面孔，绚烂的笑容。本庭现判定如下：罚你终身做我的朋友，不常见的小花朵了。白色的看起来很有田园气味，也十分具有少女心哦。 第
回复
解,HT注册会员
2021-07-08 16:23:46
要走过多少路，看过多少景色、才干遇见你 8.被好景色收购，剩余的满是好心境 9.你所不知道的border-radius属性(CSS设置是像中国人民大学、北京外国语大学、中山大学这些比较有名的大学。。。
、网络速度测游客
2021-07-08 5:43:22
游客42942：border-radius属性 注释： border-image-width特点的的4个值指定用于把边框图画分割为九个部分。它们代表了从区域的上、右、下、左侧向内的间隔。 g/210702/1-210F2130424.jpg" style="height: 503px; width: 400px;" />
回复
e能够说注册会员
2021-07-08 10:6:35
角 border-top-right-radius，//右上角 ，如何将相片拍出纯黑布景的办法。当然，假如有辅助道具，比如说，黑布等，或许拍起来就更方便了。 纯黑的布景会不会让相片显得单调？
回复