border-radius | 易学教程

通过bootstrap来学习less

阅读更多关于通过bootstrap来学习less

　　很早之前就听说过less了，但是一直拖着没去学习。最近抽空看了less，其实语法很简单，看一遍基本就知道怎么用了。平时自己写页面用less的话，感觉是方便了些，但是难道less的好处就只是这样？　　刚好最近也在学习bootstrap，发现其源文件就是用less写的，看了之后，我才深深体会的less的好处与强大，对less也有了更深一层的理解。 1、 Less是什么？　　LESS CSS是一种动态样式语言，属于CSS预处理语言的一种，它使用类似CSS的语法，为CSS的赋予了动态语言的特性，如变量、继承、运算、函数等，更方便CSS的编写和维护。　　有些人可能没有接触过less，那我们就先可以简单的看看less的一些特性。 2、语言特性快速预览：变量：变量允许我们单独定义一系列通用的样式，然后在需要的时候去调用。所以在做全局样式调整的时候我们可能只需要修改几行代码就可以了。 LESS源码： @color: #4D926F; #header { color: @color; } h2 { color: @color; } 编译后的CSS： #header { color: #4D926F; } h2 { color: #4D926F; } 混合（Mixins）混合可以将一个定义好的class A轻松的引入到另一个class B中，从而简单实现class B继承class

less(css的预处理语言)

阅读更多关于 less(css的预处理语言)

一.定义 1.浏览器只会认HTML，css，JavaScript;而完全不认识less；所以在写less后要对它进行编译，让浏览器认识他。 2.less特点：语法简单 3.使用less的三种方法：（1）在node中使用；（2）在浏览器的环境中使用less （3）可以使用客户端（koala工具）（补充：在less文件是以.less结尾的插件）二.less的语法 1.定义变量 —— @后加变量名： @testwidth：100px; div{ width:@testwdith; } (变量名可以被调用)——补充：less支持双斜线注释，但是编写css的时候会自动过滤掉 2.混合（mixins） ul{ div;（可以直接把上面定义好的变量拿来用） } 3.带参数混合（象函数一样定义一个参数的属性集合） .border-radius（@radius） { .border-radius：@radius； } .header { .border-radius（5px）——实参转入 } 还可以给参数设置默认值 .border-radius（@radius；5px）; 4.匹配模式（它相当于但又不完全是JS中的if，只有满足条件后才能匹配）定义一些浮动方向的样式： // 传参 r ，对应右浮； .flo(r){ float: right; } // 传参 l ，对应匹配左浮动

简单的CSS3 Loading动画

阅读更多关于简单的CSS3 Loading动画

　　最终效果如图一，gif图片稍微有点卡顿，事实上代码在浏览器里执行得很流畅。这里面用到的css3技术非常简单，分别是border-radius、伪元素、css3关键帧以及animation动画。　　首先整理一下大概的思路：整个圆分为AB两部分，左右都是半圆，上面盖了一个背景色为白色的小圆，如右图，简单布局如下：　　 <style> .loading{margin:100px auto; width: 8em; height: 8em; position: relative;} .loading .progress{position: absolute; width: 6em; height:6em; background-color: white; border-radius: 50%; left: 1em; top: 1em; line-height: 6em; text-align: center; } .left,.right{width: 4em;height: 8em;overflow: hidden; position: relative; float: left;} .left{ border-radius: 8em 0 0 8em;} .right{ border-radius: 0 8em 8em 0;} .left:after,.right:after

CSS3制作各种形状图像

阅读更多关于 CSS3制作各种形状图像

圆形-椭圆形-三角形-倒三角形=左三角形-右三角形-菱形-平行四边形- 星形-六角星形-五边形-六边形-八角形-心形-蛋形-无穷符号-消息提示框不废话直接 html界面（亲测的） ------转自百度经验 http://jingyan.baidu.com/article/e52e36154226ef40c70c5148.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css3画图形</title> <style media="screen"> div{ text-align: center; display: inline-block; margin-left: 20px; } #circle {/*圆形在设置CSS时要设置宽度和高度相等，然后设置border-radius属性为宽度或高度的一半即可：*/ width: 120px; height: 120px; background: #7fee1d; -moz-border-radius: 60px; -webkit-border-radius: 60px; border-radius: 60px; } /*设置椭圆形的CSS时，高度要设置为宽度的一半，border-radius属性也要做相应的改变：*/ #oval { width: 200px

css之border

阅读更多关于 css之border

针对border进行一些分析总结，如下：一、css1中： border　　　　边框（可以写复合样式） border-style　　边框样式 border-width　　边框宽度 border-color　　边框颜色如：div{border:2px solid green;} 其中值得注意的是: 　　在border-width中除了普通的数值，还可以对应thin(1px),medium(3px),thick(4px). 　　在border-style中默认的样式是none,所以一般要设置，常用的参数有：solid,dotted,dashed,double(双线边框，可做一下按钮) 　　在border-color中也是有默认值的，在不设置的时候，它会使用当前元素的颜色做边框的颜色二、css3中： 1.border-radius属性是一个最多可指定四个border-*-radius属性的复合属性　　后面可以接数值：　　20px（四个角一样20px）　　20px 30px (左上和右下为20px,右上和左下为30px ) 　　20px 30px 40px(左上：20px 右上：30px 右下：40px 左下：30px) 　　20px 30px 40px 50px （四个角顺时针）　　也可以用border-top/bottom-left/right-radius　

纯CSS画的基本图形（矩形、圆形、三角形、多边形、爱心、八卦等）

阅读更多关于纯CSS画的基本图形（矩形、圆形、三角形、多边形、爱心、八卦等）

1、正方形代码如下: #square { width: 100px; height: 100px; background: red; } 2、长方形 CSS代码如下： #rectangle { width: 200px; height: 100px; background: red; } 3、圆形代码如下: #circle { width: 100px; height: 100px; background: red; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; } 4、椭圆代码如下: #oval { width: 200px; height: 100px; background: red; -moz-border-radius: 100px / 50px; -webkit-border-radius: 100px / 50px; border-radius: 100px / 50px; } 5、上三角代码如下: #triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom:

CSS-边框-效果

阅读更多关于 CSS-边框-效果

1.1边框　　其中边框圆角、边框阴影属性，应用十分广泛，兼容性也相对较好，具有符合渐进增强原则的特性，我们需要重点掌握。 1.1.1边框圆角　　border-radius 每个角可以设置两个值，x值,y值　　1：边框圆角处理　　2：正方形　　border-radius{ 　　　　width:200px; 　　　　height:200px; 　　　　margin:100px auto; 　　　　background-color:green; 　　　　/* 　　　　border-radius:100px 100px 100px 100px / 　　　　border-radius:50px 100px 50px; 　　　　//四个角都是100px 　　　　border-radius:100px; 　　　　//表示1，3是100px 2,4是50px 　　　　border-radius:100px 50px; 　　　　*/ 　　} 　　　3:椭圆　　　　　　圆角处理时，脑中要形成圆、圆心、横轴、纵轴的概念，正元是椭圆的一种特殊情况。如下图　　　　　　　可分别设置长短半径，以“/”进行分隔，遵循“1，2，3，4”规则，前面的1~4个用来设置横轴半径（分别对应横轴1、2、3、4位置），“/”后面1~4个参数用设置纵轴半径（分别对应纵轴1、2、3、4位置）　　1.1.2边框阴影

CSS3新增UI样式

阅读更多关于 CSS3新增UI样式

1、圆角：border-radius 1个：都一样 border-radius: 一样 2个：对角 border-radius: 左上&右下右上&左下 3个：斜对角 border-radius: 左上右上&左下右下 4个：全部，顺时针 border-radius: 左上右上右下左下 border-radius: 1-4个数字 / 1-4个数字——前面是水平半径，后面是垂直半径border-radius: 10px/5px; 不给“/”则水平和垂直一样 2、边框（1）边框图片：border-image border-image-sourceg 引入图片 border-image-slice 切割图片 border-image-width 边框宽度 border-image-repeat 图片的排列方式： round 平铺,repeat 重复,stretch拉伸（2）边框颜色 border-colors（火狐下） 3、线性渐变（1）格式线性渐变格式 linear-gradient([<起点> || <角度>] ?<点>, <点>…) 只能用在背景上（2）参数起点：从什么方向开始渐变默认：top left（左上角）角度：从什么角度开始渐变 xxx deg的形式（逆时针旋转）点：渐变点的颜色和位置 black 50%，位置可选（3）实例：background

CSS揭秘（三）形状

阅读更多关于 CSS揭秘（三）形状

Chapter 3 1. 椭圆椭圆的实现主要依靠 border-radius 属性，该属性确定边框切圆角的半径大小，可以指定数值 px，也可以使用百分比显示而且该属性非常灵活，四个角可以分别设置 width: 200px; height:200px; //正方形 -------------------------------------------------------- border-radius:100px; //圆形 border-radius:50%/50%; //水平半径 / 垂直半径 -------------------------------------------------------- border-radius:50px/20px; //椭圆边角--------------------------------------------------------border-radius:50%/100% 100% 0 0 //半椭圆，底部垂直圆角为0时水平圆角也自动为0，无需再次指定 2. 平行四边形平行四边形的实现依靠 transform：skew（）实现，可以自己选择倾斜的方向X轴还是Y轴要解决的问题是：如何在容器倾斜的情况下保持内容不变？ <a href="#yolo" class="button"><div>Click me</div></a>

03--css形状--css揭秘

阅读更多关于 03--css形状--css揭秘

形状一自适应的椭圆 1.难题 1> 圆你可能注意到过，给任何正方形元素设置一个足够大的border-radius，就可以把它变成一个圆形。所用到的CSS 代码如下所示： 1 #bd { 2 width: 200px; 3 height: 200px; 4 background: #fb3; 5 border-radius: 100px; /* >= 正方形边长的一半 */ 6 } *当任意两个相邻圆角的半径之和超过border box 的尺寸时，用户代理必须按比例减小各个边框半径所使用的值，直到它们不会相互重叠为止 2> 椭圆如果它的宽高相等，就显示为一个圆；如果宽高不等，就显示为一个椭圆 2.解决方案说到border-radius，有一个鲜为人知的真相：它可以单独指定水平和垂直半径，只要用一个斜杠（/）分隔这两个值即可。这个特性允许我们在拐角处创建椭圆圆角因此，如果我们有一个尺寸为 200px × 150px 的元素，就可以把它圆角的两个半径值分别指定为元素宽高的一半，从而得到一个精确的椭圆： #bd { width:200px; height:100px; border-radius:100px/50px; } 但是，这段代码存在一个很大的缺陷：只要元素的尺寸发生变化， border-radius 的值就得跟着改。我们在图3-5 中可以看到

订阅 border-radius