border-radius | 易学教程

复习CSS3的知识点

阅读更多关于复习CSS3的知识点

目录第一篇、用户交互伪类选择器的用法第二篇、元素状态选择器第三篇、结构伪类选择器的用法第四篇、CSS伪元素的用法第五篇、border-radius画圆第六篇、画三角形和对话框第七篇、画菱形和平行四边形第八篇、画五角星和六角形第九篇、CSS画五边形和六边形第十篇、挑战心形和蛋形第十一篇、太极图的画法第十二篇、透明背景的实现第十三篇、CSS的颜色模式第十四篇、CSS3线性渐变第十五篇、CSS3的径向渐变第十六篇、CSS3的重复性渐变第十七篇、CSS3盒子阴影效果第十八篇、CSS3制作缓慢边长的方形第十九篇、CSS3的transition-timing-function详解第二十篇、制作天猫首页的类别展示效果第二十一篇、仿天猫类别过渡效果第二十二篇、CSS3动画中的@keyframes关键帧第二十三篇、CSS3动画animation复合属性第二十四篇、利用CSS3制作Loading加载动画第二十五篇、Loading动画效果实例2 第二十六篇、CSS3制作发光字、立体字、苹果字体第二十七篇、CSS3用text-overflow解决文字排版问题第二十八篇、CSS3新的字体单位rem 第一篇、用户交互伪类选择器的用法 :hover 鼠标移入 :link 没有交互 :visited 访问过 :active 鼠标按下不放 <a href="

blog主题——樱花

阅读更多关于 blog主题——樱花

贮存一下，blog代码 QAQ 页脚html  <script src="https://blog-static.cnblogs.com/files/zouwangblog/autoload.js"></script>   <link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/zouwangblog/zoom.css"> <script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.2.0/js/transition.js"></script> <script src="https://blog-static.cnblogs.com/files/zouwangblog/zoom.js"></script> <script type='text/javascript'>$('#cnblogs_post_body img').attr('data-action', 'zoom');</script> <!-

border-radius用法中精确px值和百分比的区别

阅读更多关于 border-radius用法中精确px值和百分比的区别

好久不用border-radius了，记忆中可以用百分比也可以用px，今天在写页面的时候用了百分比，发现不管设置多少左右都会是垂直的，但是上下有弧度。后来改成px就可以了。但是这是为什么呢？这是因为百分比是用的是父级的长度，banner图宽度远大与高度，所以用百分比写得到的弧度是不一样的，用px是定死的，所以是正确的。之前用百分比没有出错是因为宽高一致，所以百分比下的弧度也是一样的。今天把移动端的border-radius值都改为精确都px值，效果好多了，给自己做个笔记来源： https://www.cnblogs.com/68xi/p/12294975.html

border-radius你了解多少？

阅读更多关于 border-radius你了解多少？

在border-radius这个CSS3属性出现之前，我们要想在页面画个圆，务必借助图片来实现，出了这个border-radius属性之后，我们在页面中实现一个圆形是非常容易的。接下来我们仔细研究研究这个border-radius，看看它还有那些黑魔法？ Border-radius探究通过border-radius轻而易举的可以划出一个圆。我们通过这样的一个小例子，开始探究border-radius。 HTML: <divclass="demo"></div> CSS: .demo{ width:100px; height:100px; background-color:#f00; border-radius:50px; } 结果：要想画正圆，我们首先要有一个正方形，所以在宽高100px的正方形，加上border-radius:50px;同学们可能好奇，它是怎么计算。50px代表的是什么？这时我们看看控制台：上面的内容使我们展开的样子，虽说我们仅仅写了一个值50px；但是对于浏览器来说，他认为是四个一样的值。对于border-*-radius这种展开属性一一对应。看到这里大家能想到的类似的属性（设置一个属性，会被应用到多个展开属性的属性）: margrin(margin-left,margin-top, margin-right, margin-bottom) padding

css3 半圆弧线

阅读更多关于 css3 半圆弧线

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>css半圆弧线</title> <style type="text/css"> .circle1 { width: 100px; height: 200px; border: 1px solid black; border-radius: 100% 0 0 100%/50%; border-right: none; } .circle2 { width: 200px; height: 100px; border: 1px solid black; border-radius: 50% 50% 0 0/100% 100% 0 0; border-bottom: none; } .circle3 { width: 100px; height: 200px; border: 1px solid black; border-radius: 0 100% 100% 0/50%; border-left:

css3----画半圆弧线

阅读更多关于 css3----画半圆弧线

.circle1 { width: 100px; height: 200px; border: 1px solid black; border-radius: 100% 0 0 100%/50%; border-right: none; } .circle2 { width: 200px; height: 100px; border: 1px solid black; border-radius: 50% 50% 0 0/100% 100% 0 0; border-bottom: none; } .circle3 { width: 100px; height: 200px; border: 1px solid black; border-radius: 0 100% 100% 0/50%; border-left: none; } .circle4 { width: 200px; height: 100px; border: 1px solid black; border-radius: 0 0 50% 50%/0 0 100% 100% ; border-top: none; } <ul> <li><div class="circle1"></div></li> <li><div class="circle2"></div></li> <li><div class=

圆环进度条

阅读更多关于圆环进度条

　　　　圆环进度条，根据环内的数字，实现百分比进度。希望大家多多指点。 <!DOCTYPE html> <html> <head lang="en"> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.3/jquery.min.js"></script> <title>圆环进度条</title> <style> * {margin: 0;padding: 0} .container .first { left: 10px; top: 20px; } .container .second { left: 10px; top: 100px; } .container .third { left: 10px; top: 180px; } .container .fourth { left: 10px; top: 260px; } .circle

CSS3边框和圆角

阅读更多关于 CSS3边框和圆角

回顾CSS边框属性： border-width border-color border-style 具体见 CSS盒模型及应用。 CSS3圆角 border-radius 一个最多可以指定四个 border-*-*-radius 属性的复合属性，这个属性允许我们为元素添加圆角边框。语法：兼容性：补充：　　border-radius:50%; 　　50%相对的是元素的宽和高，如果元素是长方形则设置完border-radius成为一个椭圆形，如果元素是正方形则设置完border-radius成为一个圆形。 CSS3盒阴影 box-shadow3 设置一个或多个下拉阴影的框。语法：模糊不允许负值兼容性： CSS3边界图片 border-image 构建美丽的可扩展按钮~ 语法：各属性详解：兼容性： opera要加前缀-o- 来源： https://www.cnblogs.com/superjishere/p/12259922.html

bootstrap设计进度条和圆点

阅读更多关于 bootstrap设计进度条和圆点

1.设计进度条、文字前面的圆点和图片 2.思路：（1）设计进度条（a）进度条有滚动效果，要加上类.active （b）进度条的颜色通过类.progress-bar-success来写，可以写成. progress-bar-danger ，或者. progress-bar-warning （c）进度条有条纹，要加上类.progress-striped （2）设计文字前面的圆点（3）设计文字前面的图片源码： HTML: <li> <a href="#" class="dropdown-toggle notification-icon" data-toggle="dropdown"> <i class="fa fa-envelope"></i> <span class="badge">5</span> </a> <ul class="dropdown-menu"> <li class="dropdown-menu-header"> <strong>Messages</strong> <div class="progress progress-xs progress-striped active"> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria

CSS：画扇形

阅读更多关于 CSS：画扇形

来自： https://github.com/haizlin/fe-interview/issues/527 四个半圆叠加，过半调整 z-index < div class = " container " > < div class = " fan-1 " > </ div > < div class = " fan-2 " > </ div > < div class = " fan-3 " > </ div > < div class = " fan-4 " > </ div > </ div > .container { width : 200px ; height : 200px ; position : relative ; border-radius : 100% ; } div { width : 50% ; height : 100% ; position : absolute ; left : 0 ; top : 0 ; } .fan-1, .fan-3 { background : #CC9999 ; } .fan-2, .fan-4 { background : white ; } .fan-1, .fan-2 { border-radius : 100px 0 0 100px ; transform-origin : 100% 50% ; z-index :

订阅 border-radius