border-radius | 易学教程

CSS的border-radius 设置圆弧

阅读更多关于 CSS的border-radius 设置圆弧

现象：将div变为有一定幅度的圆形、椭圆形等方法：使用css的border-radius 属性进行设置 CSS3 border-radius 属性：向 div 元素添加圆角边框：一：首先建立一个div 二：给div设置圆角边框的弧度三：给div设置弧度为50%的时候正方形就会变为圆形四：如果给长方形设置50%的弧度就会得到椭圆形 5：如果需要得到中间保持长方形的直线两边设置为圆弧呢? 就使用像素px进行设置而不是百分比设置六：一次性标识所有角度进行不一样的设置七：也可以分别对不同角度进行设置来源： https://www.cnblogs.com/xsd1/p/11934788.html

纯css3打造旋转太极

阅读更多关于纯css3打造旋转太极

新入博客园，发点以前写的东西占个位先效果： html: < div class ="a1" > < div class ="b1" ></ div > < div class ="c1" > < div class ="c2" ></ div > </ div > < div class ="d1" > < div class ="d2" ></ div > </ div > </ div > css: * { margin : 0 ; padding : 0 ;} body { background-color : #000 ;} .a1 { position : relative ; width : 500px ; height : 500px ; overflow : hidden ; margin : 50px auto 0 ; background-color : #FFFFFF ; border-radius : 50% ; box-shadow : 0 0 50px #FFFFFF ; -webkit-transition : all 3s ease-in ; -moz-transition : all 3s ease-in ;} .d1 { position : absolute ; top : 50% ; right : 25% ; width : 50% ;

css优化滚动条样式

阅读更多关于 css优化滚动条样式

::-webkit-scrollbar-track-piece { -webkit-border-radius: 0 } ::-webkit-scrollbar { width: 5px; height: 10px } ::-webkit-scrollbar-thumb { height: 50px; background-color: #b8b8b8; -webkit-border-radius: 6px; outline-offset: -2px; filter: alpha(opacity = 50); -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: 0.5 } ::-webkit-scrollbar-thumb:hover { height: 50px; background-color: #878987; -webkit-border-radius: 6px } 来源： https://blog.csdn.net/qq_40735186/article/details/98748774

HTML加CSS3太极图demo

阅读更多关于 HTML加CSS3太极图demo

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <style type="text/css"> .wrapper { width: 300px; height: 300px; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; animation: move 10s infinite linear; /*border: 1px solid red;*/ } @keyframes move { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .circleFB { width: 300px; height: 300px; background-color: #000000; position: absolute; top: 0; border-radius: 50%; } .circleSB { width: 150px; height: 300px; background-color: white; border-radius: 0 150px 150px 0; position: