border-radius | 易学教程

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

border-radius你了解多少？

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

修改滚动条样式

阅读更多关于修改滚动条样式

/*滚动条样式*/::-webkit-scrollbar { /*滚动条整体样式*/ width: 10px; /*高宽分别对应横竖滚动条的尺寸*/ height: 10px;}::-webkit-scrollbar-thumb { /*滚动条里面小方块*/ background: #e5e5e5; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px;}::-webkit-scrollbar-thumb:hover { /*滚动条里面小方块*/ background: #cfcfcf; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px;}::-webkit-scrollbar-track { /*滚动条里面轨道*/ background: #F4F4F4;}/*::-webkit-scrollbar-button { !* 滚动条两端的按钮 *! width: 10px; }*/ 来源： https://www.cnblogs.com/maoyazhi/p/8760362.html

移动端显示滚动条并调整样式

阅读更多关于移动端显示滚动条并调整样式

.list { overflow: hidden; overflow-y: auto; } .list::-webkit-scrollbar-track-piece { background-color: rgba( 0, 0, 0, 0); border-left: 1px solid rgba( 0, 0, 0, 0); } .list::-webkit-scrollbar { width: 5px; height: 13px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .list::-webkit-scrollbar-thumb { background-color: rgba( 0, 0, 0, 0.5); background- clip: padding-box; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; min-height: 28px; } .list::-webkit-scrollbar-thumb:hover { background-color: rgba( 0, 0, 0, 0.5); -webkit-border-radius: 5px; -moz

-webkit-margin-before

阅读更多关于 -webkit-margin-before

总的来说：这是CSS3.0的对于文章段P容器的定义方法语句！display:block这个样式，只定义了P容器为一个块;后面四句是CSS3中的样式定义方法；-webkit-margin-before: 1em;-webkit-margin-after: 1em;分别定义p的上边距和下边距的数值是1倍字体高度，如10px像素的字，那么边距就为10px; -webkit-margin-start: 0px;-webkit-margin-end: 0px; 上面二句则定义为左右边距都为0PX，这个应该好理解；所以以上p {display: block;-webkit-margin-before: 1em;-webkit-margin-after: 1em;-webkit-margin-start: 0px;-webkit-margin-end: 0px;}相当于CSS2.0中的p { display: block; margin-top: 1em; margin-bottom: 1em; margin-right: 0px; margin-left: 0px;} 但由于CSS3.0要求浏览器版本较高，所以国内并没有流行CSS3.0样式，依然以CSS2.0为主流，但以后应该是CSS3.0的天下，因为它代表着先进性。下面是讲下它的由来：

MARGIN-BEFORE MARGIN-AFTER MARGIN-START MARGIN-END

阅读更多关于 MARGIN-BEFORE MARGIN-AFTER MARGIN-START MARGIN-END

每日css

阅读更多关于每日css

<!DOCTYPE html> < html lang = " en " > < head > < meta charset = " UTF-8 " > < title > 地球动画 </ title > < link rel = " stylesheet " href = " css/my.css " /> </ head > < body > < div class = " earth " > < div class = " mapWrapper " > < img src = " svg/worldMapSimplified.svg " /> </ div > < div class = " faceWrapper " > < div class = " eye left " > < div class = " whiteLeft " > </ div > < div class = " whiteRight " > </ div > </ div > < div class = " eye right " > < div class = " whiteLeft " > </ div > < div class = " whiteRight " > </ div > </ div > < div class = " blush left " > </ div > < div

前端常用的CSS代码

阅读更多关于前端常用的CSS代码

（非原创）： demo演示 1、垂直居中对齐 .vc { position : absolute ; top : 50% ; left : 50% ; transform : translate ( -50%, -50% ) ; } .vc { position : absolute ; top : 50% ; left : 50% ; width : 100px ; height : 100px ; margin : -50px 0 -50px ; } ``````css 在这里插入代码片 2、全屏显示 html, body { position : fixed ; width : 100% ; height : 100% ; } div { height : 100% ; } 3、不同a标签链接使用不同样式 // link a [ href ^ = "http://" ] { background: url ( link . gif ) no-repeat center right ; } / / emails a [ href ^ = "mailto:" ] { background: url ( email . png ) no-repeat center right ; } / / pdfs a [ href$ = ".pdf" ] { background: url (

Web前端一种动态样式语言-- Less

阅读更多关于 Web前端一种动态样式语言-- Less

变量变量允许我们单独定义一系列通用的样式，然后在需要的时候去调用。所以在做全局样式调整的时候我们可能只需要修改几行代码就可以了。 // LESS @color: #4D926F; #header { color: @color; } h2 { color: @color; } /* 生成的 CSS */ #header { color: #4D926F; } h2 { color: #4D926F; } 混合混合可以将一个定义好的class A轻松的引入到另一个class B中，从而简单实现class B继承class A中的所有属性。我们还可以带参数地调用，就像使用函数一样。 // LESS .rounded-corners (@radius: 5px) { border-radius: @radius; -webkit-border-radius: @radius; -moz-border-radius: @radius; } #header { .rounded-corners; } #footer { .rounded-corners(10px); } /* 生成的 CSS */ #header { border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; } #footer {

border-radius讲解2

阅读更多关于 border-radius讲解2

一：border-radius只有一个取值时，四个角具有相同的圆角设置，其效果是一致的： .demo { border-radius: 10px; } 其等价于： .demo{ border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; } 效果：二：border-radius设置两个值，此时top-left等于bottom-right并且他们取第一个值；top-right等于bottom-left并且他们取第二个值，也就是说元素左上角和右下角相同，右上角和左下角相同 .demo { border-radius: 10px 20px; } 等价于： .demo { border-top-left-radius: 10px; border-bottom-right-radius: 10px; border-top-right-radius: 20px; border-bottom-left-radius: 20px; } 效果：三：border-radius设置三个值，此时top-left取第一个值，top-right等于bottom-left并且他们取第二个值，bottom

订阅 border-radius