border-radius

你可以通过CSS应用一个border-radius给任何元素“圆角”。你只会注意到是否涉及颜色变化。例如，如果元素的背景颜色或者边框与元素覆盖的不同。(注：即元素的背景颜色或边框颜色与其父元素的颜色存在差异，下面例子中元素的背景颜色和边框呈现浅绿色，而其父元素原色为白色，便于明显观察到圆角)。举个简单的例子： #example-one { border-radius: 10px; background: #BADA55; } #example-two { border-radius: 10px; border: 3px solid #BADA55; } 　　 这确实不再需要了，但是为了绝佳的浏览器支持，你可以添加-webkit-和-moz-前缀。 .round { /* Safari 3-4, iOS 1-3.2, Android 1.6- */ -webkit-border-radius: 12px; /* Firefox 1-3.6 */ -moz-border-radius: 12px; /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */ border-radius: 12px; } 　　 注意这些属性的顺序：首先列出厂商前缀，最后列出非前缀的“ 规范”版本。 这是正确的方法。

为什么要预处理器 css层叠样式表是一门标记语言，并不是编程语言，因此不可以自定义变量，不可以引用等，它不具备任何语法支持，它主要缺陷如下： 语法不够强大，比如：无法嵌套书写，导致模块化开发中需要书写很多重复的选择器； 没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护 这就导致了我们在工作中无端增加了许多工作量。为了解决这个问题，前端开发人员会使用一种称之为 【CSS 预处理器】 的工具，提供 CSS 缺失的样式层复用机制、减少冗余代码，提高样式代码的可维护性。大大提高了前端在样式上的开发效率。 什么是CSS预处理器 CSS 预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行 CSS 的编码工作。就是“用一种专门的编程语言，进行 Web 页面样式设计，再通过编译器转化为正常的 CSS 文件，以供项目使用”。 CSS预处理器为CSS增加一些编程的特性，无需考虑浏览器的兼容性问题，例如你可以在CSS中使用变量、简单的逻辑程序、函数等等在编程语言中的一些基本特性，可以让你的CSS更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。 常用的CSS预处理器 SASS 基于 Ruby，通过服务端处理，功能强大。解析效率高。需要学习

border:2px solid; border-radius:25px; 来源： https://www.cnblogs.com/223zzm/p/11529708.html

border-radius圆角 当盒子的宽高一样时，设置盒子的border-radius为50%，得到一个圆形 border-radius: 20px 30px 200px 200px; 只写一个值：表示四边的圆角都为该值 写两个值：第一个值表示左上角和右下角的圆角，第二个值表示右上角和左下角的圆角 写三个值：第一个值表示左上角的圆角，第二个值表示右上角和左下角的圆角，第三个值表示右下角 写四个值：第一个值表示左上角的圆角，第二个值表示右上角的圆角，第三个值表示右下角，第一个值表示左下角的圆角 来源： https://www.cnblogs.com/msw0803/p/11525921.html

主题地址 silence 博客皮肤 blacklowkey 页面定制css代码 body{background:#fff;min-height:100%!important;color:#314659!important;font-family:Lato,"PingFang SC","Microsoft YaHei",sans-serif!important}a{transition:all .3s ease!important}a:hover{color:#2D8CF0!important;text-decoration:none!important}#ad_c1,#ad_c2,#ad_t2,#author_profile,#blogCalendar,#blogTitle h2,#comment_form_container p:nth-of-type(3),#comments_pager_top,#green_channel,#homepage_top_pager,#sidebar_imagecategory,#sidebar_postarchive,#sidebar_recentcomments,#sidebar_recentposts,#sidebar_scorerank,#sidebar_search,#sidebar_shortcut,#sidebar

圆角边框 border-radius 在CSS中，用border-radius属性来定义圆角边框。 border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性。 border: solid; 必须先有边框线 border-radius: 50px 0px 30px 40px; /* border-radius: 左上 右上 右下 左下*/ border-radius: 50% 0 30%; /* border-radius: 左上 右上左下 右下*/ border-radius: 50em 0; /* border-radius: 左上右下 右上左下*/ 来源： https://www.cnblogs.com/chengdu123/p/11523207.html

Custom 预览 代码 CSS .cnblogs-markdown .hljs{display:block;color:#333;overflow-x:auto;background:#F2F4F5!important;border:none!important;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace!important;padding:1em!important;font-size:14px!important}.hljs-comment,.hljs-meta{color:#969896}.hljs-emphasis,.hljs-quote,.hljs-string,.hljs-strong,.hljs-template-variable,.hljs-variable{color:#df5000}.hljs-keyword,.hljs-selector-tag,.hljs-type{color:#a71d5d}.hljs-attribute,.hljs-bullet,.hljs-literal,.hljs-symbol{color:#0086b3}.hljs-name,.hljs-section{color:#63a35c}.hljs-tag{color:#333}.hljs-attr,

今天想找个例子，才发现以前对这个属性理解不深，先记下来 这个属性支持浏览器IE 9、Opera 10.5、Safari 5、Chrome 4和Firefox 4 首先这里用的chrome浏览器测试 其次border-radius和-webkit-border-radius在同样属性的时候，表现并不一样 .test1{ -webkit-border-radius:30px 10px; width:100px;height:100px;background:#f6e30b;border: 1px solid #eda306; } .test2{ border-radius:30px 10px; width:100px;height:100px;background:#f6e30b;border: 1px solid #eda306; } 本来就是用的-wibkit-内核，所以建议，写的时候，格式最好把纯粹的写法写在最下面，如这样 .test1{-webkit-border-radius:30px 10px; border-radius:30px 10px; width:100px;height:100px;background:#f6e30b;border: 1px solid #eda306; } 首先一般都会写类似 border-radius:10px; 这样的 div

内容： 1.圆角 border-radius 2.阴影 text-shadow、box-shadow 3.渐变 linear、radial 4.rgba rgb+alpha opacity 5.transform 6.动画 transition、animation 1.圆角 border-radius 通过设置元素的border-radius值，可以轻松给元素设置圆角边框，甚至实现绘制圆、半圆、四分之一的圆等各种圆角图形： (1)只设置一个值 只设置一个值得情况常用来给button加圆角边框，或者画一个圆形按钮，仅需设置一个数值，即可给元素的四个边角设置统一的圆角弧度 1 .box {width:300px; height:300px; background:#CCC; margin:10px auto 0; border-radius:10px;} 效果： (2)四个方向的值分别设置 border-radius属性其实是border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius四个属性的简写模式，因此，border-radius : 30px;，其实等价于border-radius : 30px 30px 30px 30px;

border-radius [ˈbɔrdə(r)] - [ˈrediəs] 英文示意： border：边界，国界，边疆 radius：半径，范围 定义： 　 复合写法： border-radius : [ length | % ] (可以设置宽度／百分比); border-radius : [ length | % ] {1,4} (四个角：左上，右上，右下，左下 即顺时针方向); border-radius : [ length | % ] {1,4} / [ length | % ] {1,4} (水平方向／垂直方向); 拆分写法： border-垂直方向-水平方向-radius : 水平半径,垂直半径 border-top-left-radius : [ length | % ] {1,2} (左上角，第一参数代表水平半径，第二个参数代表垂直半径，若第二个参数省略，默认等于第一个参数); border-top-right-radius : [ length | % ] {1,2} (右上角) border-bottom-left-radius : [ length | % ] {1,2} (左下角) border-bottom-right-radius : [ length | % ] {1,2} (右下角) 名词解释： 半径：边角距离圆切点的距离 百分比：宽度高度，边框