（点击上方公众号，可快速关注）
来源：流浪的诗人
链接：https://www.cnblogs.com/wdlhao/p/5751211.html
1、圆形
示例:
思路：给任何正方形元素设置一个足够大的 border-radius ，就可以把它变成一个圆形.代码如下：
html:
<div class="size example1"></div>
css:
.size{
width:200px;
height:200px;
background:#8BC34A;
}
.example1{
border-radius:100px;
}
2、自适应椭圆
思路：border-radius 这个属性还有另外一个鲜为人知的真相，它不仅可以接受长度值，还可以接受百分比值。这个百分比值会基于元素的尺寸进行解析.这意味着相同的百分比可能会计算出不同的水平和垂直半径。代码如下：
html:
<div class="example3"></div>
css:
.example3{
width:200px;
height:150px;
border-radius:50%;
background:#8BC34A;
}
3、自适应的半椭圆:沿横轴劈开的半椭圆
思路：border-radius 的语法比我们想像中灵活得多。你可能会惊讶地发现 border-radius 原来是一个简写属性。第一种方法就是使用它所对应的各个展开式属性：
? border-top-left-radius
? border-top-right-radius
? border-bottom-right-radius
? border-bottom-left-radius
我们甚至可以为所有四个角提供完全不同的水平和垂直半径，方法是在斜杠前指定 1~4 个值，在斜杠后指定另外 1~4 个值。举例来说，当 border-radius 的值为10px / 5px 20px 时，其效果相当于 10px 10px 10px 10px / 5px 20px 5px 20px 。
为 border-radius 属性分别指定4、3、2、1 个由空格分隔的值时，这些值是以这样的规律分配到四个角上的（请注意，对椭圆半径来说，斜杠前和斜杠后最多可以各有四个参数，这两组值是以同样的方法分配到各个角的）
代码如下：自适应的半椭圆:沿横轴劈开的半椭圆
html:
<div class="example4"></div>
css:
.example4{
width:200px;
height:150px;
border-radius:50%/100%100%00;
background:#8BC34A;
}
4、自适应的半椭圆:沿纵轴劈开的半椭圆
思路：自适应的半椭圆:沿纵轴劈开的半椭圆
代码如下：
html:
<div class="example5"></div>
css:
.example5{
width:200px;
height:150px;
border-radius:100%00100%/50%;
background:#8BC34A;
}
5、四分之一椭圆
思路：其中一个角的水平和垂直半径值都需要是100%，而其他三个角都不能设为圆角。
代码如下：
html:
<div class="example6"></div>
css:
.example6{
width:160px;
height:100px;
border-radius:100%000;
background:#8BC34A;
}
6、用椭圆绘制opera浏览器的logo
思路：绘制opera浏览器的logo,分析起来不难，就只有两个图层，一个是最底部的椭圆，一个是最上面那层的椭圆。先确定一下最底层的椭圆宽高，量了一下，水平宽度为258px，垂直高度为275px，因为其是一个对称的椭圆，没有倾斜度，故4个角均为水平半径为258px，垂直半径为275px的4个相等椭圆，用同样的办法确定最里面的椭圆的半径，因此，四个角均为水平半径120px，垂直半径为229px的椭圆，代码如下：
html:
<div class="opera">
<div class="opera-top"></div>
</div>
css:
.opera{
width:258px;
height:275px;
background:#F22629;
border-radius:258px258px258px258px/275px275px275px275px;
position:relative;
}
.opera-top{
width:112px;
height:231px;
background:#FFFFFF;
border-radius:112px112px112px112px/231px231px231px231px;
position:absolute;
left:50%;
right:50%;
top:50%;
bottom:50%;
margin-left:-56px;
margin-top:-115px;
}
7、平行四边形
思路：伪元素方案:是把所有样式（背景、边框等）应用到伪元素上，然后再对 伪元素进行变形。因为我们的内容并不是包含在伪元素里的，所以内容并不会受到变形的影响。代码如下：
html:
<div class="button">transform:skew()</div>
css:
.button {
width:200px;
height:100px;
position:relative;
left:100px;
line-height:100px;
text-align:center;
font-weight:bolder;
}
.button::before {
content:'';/* 用伪元素来生成一个矩形 */
position:absolute;
top:0;right:0;bottom:0;left:0;
z-index:-1;
transform:skew(45deg);
background:#8BC34A;
}
技巧总结：这个技巧不仅对 skew() 变形来说很有用，还适用于其他任何变形样式，当我们想变形一个元素而不想变形它的内容时就可以用到它。
8、菱形
思路：我们把这个技巧针对 rotate() 变形样式稍稍调整一下，再用到一个正方形元素上，就可以很容易地得到一个菱形。代码如下：
html:
<div class="example1">transform:rotate()</div>
css:
.example1 {
width:140px;
height:140px;
position:relative;
left:100px;
line-height:100px;
text-align:center;
font-weight:bolder;
}
.example1::before {
content:'';
position:absolute;
top:0;right:0;bottom:0;left:0;
z-index:-1;
transform:rotate(45deg);
background:#8BC34A;
}
技巧总结：这个技巧的关键在于，我们利用伪元素以及定位属性产生了一个方块， 然后对伪元素设置样式，并将其放置在其宿主元素的下层。这种思路同样可 以运用在其他场景中，从而得到各种各样的效果。
9、菱形图片
思路：基于变形的方案，
我们想让图片的宽度与容器的对角线相等，而不是与边长相等。需要用到勾股定理，这个定理告诉我们，一个正方形的对角线长度等于它的边长乘以根号2，约等于1.414 213 562 。因此，把 max-width 的值设置为根号2乘以100%约等于 414.421 356 2% 是很合理的，或者把这个值向上取整为 142% ，因为我们不希望因为计算的舍入问题导致图片在实际显示时稍小（但稍大是没问题的，反正我们都是在裁切图片嘛）
代码如下：
html:
<div class="picture">
<img src="./imgs/7.jpg">
</div>
css:
.picture {
width:200px;
transform:rotate(45deg);
overflow:hidden;
margin:50px;
}
.picture img {
max-width:100%;
transform:rotate(-45deg)scale(1.42);
z-index:-1;
position:relative;
}
技巧总结：我们希望图片的尺寸属性保留 100% 这个值，这样当浏览器不支持变 形样式时仍然可以得到一个合理的布局。 ? 通过 scale() 变形样式来缩放图片时，是以它的中心点进行缩放的 （除非我们额外指定了 transform-origin 样式） 。通过 width 属性 来放大图片时，只会以它的左上角为原点进行缩放，从而迫使我们 动用额外的负外边距来把图片的位置调整回来.
10、切角效果
思路：基于background:linear-gradient()的方案:把四个角都做出切角效果了。你需要四层渐变图案，代码如 下所示：
html:
<div class="example2">Hey, focus! You’re supposed to be looking at my corners, not reading my text. The text is just placeholder!</div>
css:
.example2{
background:#8BC34A;
background:linear-gradient(135deg,transparent15px,#8BC34A0)topleft,
linear-gradient(-135deg,transparent15px,#8BC34A0)topright,
linear-gradient(-45deg,transparent15px,#8BC34A0)bottomright,
linear-gradient(45deg,transparent15px,#8BC34A0)bottomleft;
background-size:50%50%;
background-repeat:no-repeat;
padding:1em1.2em;
max-width:12em;
line-height:1.5em;
}
11、弧形切角
思路：上述渐变技巧还有一个变种，可以用来创建弧形切角（很多人也把这种 效果称为“内凹圆角” ，因为它看起来就像是圆角的反向版本） 。唯一的区别 在于，我们会用径向渐变来替代上述线性渐变，代码如下：
html:
<div class="example3">Hey, focus! You’re supposed to be looking at my corners, not reading my text. The text is just placeholder!</div>
css:
.example3{
background:#8BC34A;
background:radial-gradient(circleattopleft,transparent15px,#8BC34A0)topleft,
radial-gradient(circleattopright,transparent15px,#8BC34A0)topright,
radial-gradient(circleatbottomright,transparent15px,#8BC34A0)bottomright,
radial-gradient(circleatbottomleft,transparent15px,#8BC34A0)bottomleft;
background-size:50%50%;
background-repeat:no-repeat;
padding:1em1.2em;
max-width:12em;
}
12、简单的饼图
思路：基于 transform 的解决方案：我们现在可以通过一个 rotate() 变形属性来让这个伪元素转起来。 如果我们要显示出 20% 的比率，我们可以指定旋转的值为 72deg （0.2 × 360 = 72） ，写成 .2turn 会更加直观一些。你还可以看到其 他一些旋转值的情况。代码如下：
html:
<div class="pie"></div>
css：
.pie{
width:140px;
height:140px;
background:#8BC34A;
border-radius:50%;
background-image:linear-gradient(toright,transparent50%,#6550);
}
.pie::before{
content:'';
display:block;
margin-left:50%;
height:100%;
border-radius:0100%100%0/50%;
background-color:inherit;
transform-origin:left;
transform:rotate(.1turn);/*10%*/
transform:rotate(.2turn);/*20%*/
transform:rotate(.3turn);/*30%*/
}
提示：在参数中规定角度。turn是圈，1turn = 360deg；另外还有弧度rad，2nrad = 1turn = 360deg。如，transform:rotate(2turn); //旋转两圈
此方法显示 0 到 50% 的比率时运作良好，但如果我们尝试显示 60% 的比率时（比如指定旋转值为 .6turn 时），会出现问题。解决方法：使 用上述技巧的一个反向版本来实现这个范围内的比率：设置一个棕色的伪 元素，让它在 0 至 .5turn 的范围内旋转。因此，要得到一个 60% 比率的饼 图，伪元素的代码可能是这样的：
html:
<div class="pie2"></div>
css:
.pie2{
width:140px;
height:140px;
background:#8BC34A;
border-radius:50%;
background-image:linear-gradient(toright,transparent50%,#6550);
}
.pie2::before{
content:'';
display:block;
margin-left:50%;
height:100%;
border-radius:0100%100%0/50%;
background:#655;/*当范围大于50%时,需要改变伪元素的背景颜色为#655;*/
transform-origin:left;
transform:rotate(.1turn);
}
用 CSS 动画来实现一个饼图从 0 变化到 100% 的动画，从而得到一个炫酷的进度指示器：
代码如下：
html:
<div class="pie3"></div>
css:
.pie3 {
width:140px;
height:140px;
border-radius:50%;
background:yellowgreen;
background-image:linear-gradient(toright,transparent50%,currentColor0);
color:#655;
}
.pie3::before {
content:'';
display:block;
margin-left:50%;
height:100%;
border-radius:0100%100%0/50%;
background-color:inherit;
transform-origin:left;
animation:spin3slinearinfinite,bg6sstep-endinfinite;
}
@keyframes spin {
to { transform: rotate(.5turn);}
}
@keyframes bg {
50% { background: currentColor;}
}
-------------推荐-------------
范品社推出的极客T恤，含程序员、电影、美剧和物理题材，面料舒适、100%纯棉，有黑、白、灰、藏青色，单件 ￥59.9、两件减￥12、四件减￥28、六件减￥42，详见网店商品页介绍。
（上面为部分 T 恤款式）
网店地址：https://fanpinshe.taobao.com
淘口令：复制以下红色内容，然后打开手淘即可购买
范品社，使用￥极客T恤￥抢先预览（长按复制整段文案，打开手机淘宝即可进入活动内容）
温馨提示
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请后台提交工单处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，请使用WINRAR解压,如遇到无法解压的请后台提交工单！
【免责声明】：
本站所发布的一切资源仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。本站信息来自网络，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，购买注册，得到更好的正版服务。
【关于转载】：
本站尊重互联网版权体系，本站部分图片、文章大部分转载于互联网、所有内容不代表本站观点、不对文章中的任何观点负责、转载的目的只用于给网民提供信息阅读，无任何商业用途，所有内容版权归原作者所有
如本站（文章、内容、图片、视频）任何资料有侵权，先说声抱歉；麻烦您请联系请后台提交工单，我们会立即删除、维护您的权益。非常感谢您的理解。
【附】:
二○○二年一月一日《计算机软件保护条例》第十七条规定：为了学习和研究软件内含的设计思想和原理，通过安装、显示、传输或者存储软件等方式使用软件的，可以不经软件著作权人许可，不向其支付报酬！鉴于此，也希望大家按此说明研究软件！
注：本站资源来自网络转载，版权归原作者和公司所有，如果有侵犯到您的权益，请第一时间联系我们处理！
-----------------------------------------------------------------------------------------------------------
【版权声明】：
一、本站致力于为源码爱好者提供国内外软件开发技术和软件共享，着力为用户提供优资资源。
二、本站提供的源码下载文件为网络共享资源，请于下载后的24小时内删除。如需体验更多乐趣，还请支持正版。
三、如有内容侵犯您的版权或其他利益的，请编辑邮件并加以说明发送到站长邮箱。站长会进行审查之后，情况属实的会在三个工作日内为您删除。
-----------------------------------------------------------------------------------------------------------
源码村资源网 » dwdiv圆角边框代码(div 边框圆角)
1 评论