border-radius | 易学教程

CSS之border-radius

阅读更多关于 CSS之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; } 　　注意这些属性的顺序：首先列出厂商前缀，最后列出非前缀的“ 规范”版本。这是正确的方法。

CSS3 圆角（border-radius）

阅读更多关于 CSS3 圆角（border-radius）

值：半径的长度前缀 -moz(例如 -moz-border-radius)用于Firefox -webkit(例如：-webkit-border-radius)用于Safari和Chrome。例1 <div id="round"></div> #round { padding:10px; width:300px; height:50px; border: 5px solid #dedede; -moz-border-radius: 15px; /* Gecko browsers */ -webkit-border-radius: 15px; /* Webkit browsers */ border-radius:15px; /* W3C syntax */ } 效果：例2：无边框 <div id="round"></div> #round { padding:10px; width:300px; height:50px; background:#FC9; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius:15px; } 效果：书写顺序 /* Gecko browsers */ -moz-border-radius: 5px; /* Webkit browsers */ -webkit

CSS border-radius

阅读更多关于 CSS border-radius

CSS3属性：border-radius border-radius ： none | <length>{1,4} [ / <length>{1,4} ]? 相关属性 border-top-right-radius , border-bottom-right-radius , border-bottom-left-radius , border-top-left-radius 取值： <length> ：由浮点数字和单位标识符组成的长度值。不可为负值。 border-top-left-radius：由浮点数字和单位标识符组成的长度值。不可为负值。说明：第一个值是水平半径。如果第二个值省略，则它等于第一个值，这时这个角就是一个四分之一圆角。如果任意一个值为0，则这个角是矩形，不会是圆的。值不允许是负值。用这个属性可以很容易做出圆角效果，当然，也可以做出圆形效果。原理很简单，“正方形的内切圆的半径等于正方形边长的一半”。 1.下面就做一个的圆。 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS3 border-radius</title> 6 <style> 7 .circle { 8 background-color:#008080; 9 width: 400px; /*

css - border-radius

阅读更多关于 css - border-radius

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <style> 9 body{ 10 text-align: center; 11 } 12 13 h1{ 14 width: 80px; 15 height: 80px; 16 background-color: #000; 17 display: inline-block; 18 19 /* 四周圆角为10px */ 20 border-radius: 10px; 21 /* 上左，下右圆角为10px */ 22 border-radius: 10px 0; 23 /* 上右，下左圆角为10px */ 24 border-radius: 0 10px; 25 /* 四周圆角为10px */ 26 border-radius: 10px 10px 10px; 27 /* 左上角10px圆角、右上角10px圆角、右下角10px圆角

border-radius实现圆弧阴影效果

阅读更多关于 border-radius实现圆弧阴影效果

1 原理利用border-radius实现一个圆弧边的矩形，并添加box-shadow，然后放在目标元素的下方 demo: html <div class="demo1"></div> css .demo1{ width: 500px; height: 200px; margin: 30px auto; position: relative; background-color: #fff; box-shadow: 0px 0px 3px rgba(0,0,0,0.3),0px 0px 3px rgba(0,0,0,0.2) inset; -webkit-box-shadow:0px 0px 3px rgba(0,0,0,0.3),0px 0px 3px rgba(0,0,0,0.2) inset; -moz-box-shadow:0px 0px 3px rgba(0,0,0,0.3),0px 0px 3px rgba(0,0,0,0.2) inset; -o-box-shadow:0px 0px 3px rgba(0,0,0,0.3),0px 0px 3px rgba(0,0,0,0.2) inset; } .demo1:after,.demo1:before{ position: absolute; content: ''; top: 50%; bottom: 0px;

CSS动画DAY01

阅读更多关于 CSS动画DAY01

1.border-radius用于添加圆角效果 border-radius：[ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]? <length>：用长度值设置对象的圆角半径长度。不允许负值 <percentage>：用百分比设置对象的圆角半径长度。不允许负值 border-radius:5px 10px 15px 20px; 一个矩形的四个角，顺序是顺时针 border-radius:50%; 圆形 2.box-shadow用于添加阴影效果 box-shadow：none|[inset? && [<offset-x><offset-y><blur-radius>?<spread-radius>?<color>?]]# inset：设置对象的阴影类型为内阴影。该值为空时，则对象的阴影类型为外阴影 <offset-x> : 这是第一个 length值设置水平偏移量，如果是负值则阴影位于元素左边。 <offset-y> : 这是第二个 length值设置垂直偏移量，如果是负值则阴影位于元素上面。 <blur-radius> :这是第三个 length值。值越大，糊糊面积越大，阴影就越大越淡。不能为负值。默认为0，此时阴影边缘锐利。 <color> ：设置对象的阴影的颜色。 3.text

博客园样式调整的博客

阅读更多关于博客园样式调整的博客

原文博客园博客排版（js样式实例）昨天在博客园中看到一位大神发的博客园样式排版博客，我一看。妈呀，太漂亮了，二话不说赶快学起，昨天我花了一天的时间，终于把我的博客也弄得有一丢丢像样了，有好东西，当然要分享给各位；大神的链接： https://www.cnblogs.com/hafiz/p/9276689.html ，里面讲的很细很细，每一个功能的讲解都有。大家如果想仔细研究每一个功能的实现就看一下大神的博客，想省事就看我的，简单，快捷，省事。当然我在他的基础上加了一些功能如：背景音乐，背景图片，电子时间，鼠标点击特效等等效果图如下：大家也可以访问我博客主页查看博客排版 1.找到你博客的设置，位置如图 2.首先你得申请一下你博客园的js权限；不申请，你们的js代码是没有用的，申请成功是这个样子的 3.找到页面定制CSS代码区域，勾选禁用默认CSS； 4.在里面粘贴下面代码css代码； @font-face { font-family: 'FontAwesome'; font-style: normal; font-weight: normal; src: url("http://blog.zhaishidan.cn/css/font/fontawesome-webfont.eot?#iefix") format('embedded-opentype'), url(

SASS（二）

阅读更多关于 SASS（二）

样式规则（Style Rules）总览　　和css一样，样式规则是Sass的基础，原理也差不多：用选择器选择你所要改变样式的元素，然后声明一些属性去决定它的样式。 Sass: .button { padding: 3px 10px; font-size: 12px; border-radius: 3px; border: 1px solid #e1e4e8; } css: .button { padding: 3px 10px; font-size: 12px; border-radius: 3px; border: 1px solid #e1e4e8; } 1）嵌套（Nesting）　　当然Sass致力于让码生幸福，不会让我们一遍又一遍地去写重复的选择器，所以你可以写嵌套样式，Sass会自动把外层选择器和内层样式规则结合起来。 Sass: nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; } } css: nav ul { margin: 0; padding: 0; list-style: none; } nav li {

博客样式分享

阅读更多关于博客样式分享

声明：这份代码是 BNDong 大佬写的为了方便萌新使用我就贴出来啦记得先申请CSS权限 CSS代码框： #EntryTag{margin-top:20px;font-size:9pt;color:gray}.topicListFooter{text-align:right;margin-right:10px;margin-top:10px}#divRefreshComments{text-align:right;margin-right:10px;margin-bottom:5px;font-size:9pt}*{margin:0;padding:0}html{height:100%;max-height:100%;font-size:62.5%;-webkit-tap-highlight-color:rgba(0,0,0,0)}body{background-color:#fff;font-size:12px;max-height:100%;font-family:"Merriweather","Open Sans","Microsoft Jhenghei","Microsoft Yahei",sans-serif;color:#3a4145;-moz-font-feature-settings:'kern' 1;-o-font-feature-settings:'kern

纯css 实现大白

阅读更多关于纯css 实现大白

首先是用html 语言来搭建框架 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Bymax</title> <link rel="stylesheet" href="dabai.css"> </head> <body> <div class="baymax">  <div class="head"> <div class="eye"></div> <div class="eye2"></div> <div class="mouth"></div> </div>  <div class="torso"> <div class="heart"> </div> </div>  <div class="belly"> <div class="cover" =""></div> </div>  <div class="left-arm"> <div class="l-bigfinger"></div> <div class="l-smallfinger"></div> </div> <div class="right-arm"> <div class="r-bigfinger" ></div> <div

订阅 border-radius