圆角border-radius

    border-radius:length
*注: 这是一个缩写,相当于四个角设置同样的值,用px或者百分比都可以,想要成为圆形,就用50%,你也可以单独设置每个角,语法和设置边框有的一拼,例如border-radius:5px 2px 4px 1px,分别是左上、右上、右下、左下,border-top-left-radius:5px;兼容IE9+、Firefox +、Chrome、Safari + 以及 Opera 支持。。。还有为了兼容老版本的火狐啊,谷歌啊等等,你可以加前缀,火狐-moz、谷歌/苹果-webkit、Opera -o、ie -ms。 投影box-shadow
box-shadow:h-shadow v-shadow blur spread color inset
*注: h-shadow水平阴影(必需) v-shadow垂直阴影(必需) blur模糊距离(可选) spread的尺寸(可选) color阴影颜色(可选) inset内部阴影,最后要提的是inset,加上就是内阴影,不加就是外阴影。 文本投影text-shadow
text-shadow:h-shadow v-shadow blur color
h-shadow水平阴影(必需) v-shadow垂直阴影(必需) blur模糊距离(可选) color阴影颜色(可选)。 背景渐变gradient
gradient更确切的是属性值,由于火狐和谷歌写法不同,规定按钮的背景,那就是background-image:-moz-linear-gradient(center top , #ddd %, #D4D4D4 %, #C5C5C5 %, #ADADAD %);linear-gradient是线性渐变,radial-gradient是径向渐变,我们这里的按钮时用线性的,top是从上到下、left是从左到右,如果定义成left top,那就是从左上角到右下角,我写了个center,可以去掉,#ddd %这个是起始颜色的意思,#ADADAD %结束颜色,中间可以按自己的需求添加各种百分比位置的颜色,我那个50%是指中间部位,第一个50%是前半程的结束颜色,第二个50%是后半程的起始颜色
再看下webkit内核的写法,background-image:-webkit-gradient(linear, left top, left bottom, color-stop(, #ddd), color-stop(0.5, #D4D4D4), color-stop(0.5, #C5C5C5), color-stop(, #ADADAD));linear线性渐变写到了括号里边,然后是一对起始坐标,一对结束坐标,可以用具体数字也可以用关键位置,我用的关键位置代表左上到左下,你得脑海里是不是出现了一条竖着的直线,对了,在往后边的参数看color-stop(, #ddd)写颜色要用color-stop这个呀,0就是起始,后边是对应的颜色,1代表结束颜色,中间参数可以用0到1之间的小数表示。 倒影-webkit-box-reflect
-webkit-box-reflect:direction | offset | mask-box-image
目前只有weibkit内核的浏览器支持,direction的参数有above:倒影在对象的上边、below:下边、left:左边、right:右边,offset倒影与对象之间的间 隔,可以用像素单位,可以用百分比,可以为负数;懂ps的知道倒影需要遮罩层,mask-box-image就是遮罩层,其可用的参数是;none:无遮 罩图像、url:引用图像作为遮罩、linear-gradient:使用线性渐变创建遮罩图像、radial-gradient:使用径向(放射性)渐 变创建遮罩图像、repeating-linear-gradient:使用重复的线性渐变创建背遮罩像、repeating-radial- gradient:使用重复的径向(放射性)渐变创建遮罩图像,咱不复杂,就用线性渐变就够了,-webkit-linear-gradient(transparent,transparent %,rgba(,,,0.3))这个参数组合你可以直接用的,就是一个遮罩的用处。

Css3小技术的更多相关文章

  1. 手把手教你玩转 CSS3 3D 技术

    css3的3d起步 要玩转css3的3d,就必须了解几个词汇,便是透视(perspective).旋转(rotate)和移动(translate).透视即是以现实的视角来看屏幕上的2D事物,从而展现3 ...

  2. 手把手教你玩转CSS3 3D技术

    手把手教你玩转 CSS3 3D 技术   要玩转css3的3d,就必须了解几个词汇,便是透视(perspective).旋转(rotate)和移动(translate).透视即是以现实的视角来看屏幕上 ...

  3. 蓝的成长记——追逐DBA(6): 做事与做人:小技术,大为人

    ***********************************************声明*************************************************** ...

  4. css3 小图标提示特效

    最近的计划,就是每天来几个特效,当然这里有限制,在什么候选区只能放一个,还每天有限制发布的,哎, 啊 终于写完了,看到一个挺好玩的东西,想到能不能用网页的特效做出来,试试呗!不过,一想肯东有很多的 相 ...

  5. CSS3小黄人

    CSS3实现小黄人 效果图: 代码如下,复制即可使用: <!DOCTYPE HTML> <HTML> <head> <title>CSS3实现小黄人&l ...

  6. 【CSS】330- 手把手教你玩转 CSS3 3D 技术

    点击上方"前端自习课"关注,学习起来~ CSS3的3D起步 要玩转css3的3d,就必须了解几个词汇,便是透视(perspective).旋转(rotate)和移动(transla ...

  7. CSS3 小黄人案例

    使用 CSS3 和 HTML5 制作一个小黄人. 结构代码: <div class="wrap"> <!-- 头发 --> <div class=&q ...

  8. CSS3扩展技术

    我们使用扩展技术编写代码时,需要先用编译器将我们的文件进行编译,编译后的文件才能够使用. less技术相关语法 less相对来说比较简单,语法也较少:     变量的定义:     @w:20px; ...

  9. CSS3小清新下拉菜单 简易大方

    之前有分享过几款CSS3菜单和jQuery菜单,像这款HTML5/CSS3自定义下拉框 3D卡片折叠动画3D效果非常华丽,这次要分享的这款相对比较简单,很适合用在用户的操作面板上.先来看看效果图: 怎 ...

随机推荐

  1. Linux_shell条件判断if中的-a到-z的意思

    [ -a FILE ]  如果 FILE 存在则为真.  [ -b FILE ]  如果 FILE 存在且是一个块特殊文件则为真.  [ -c FILE ]  如果 FILE 存在且是一个字特殊文件则 ...

  2. c#使用spy进行模拟操作

    很无奈,写了很长时间,最后保存时网页失去响应,真是要命呢.本来想就此放弃了,但是想还是粗略的重写一次吧,希望日后可以对朋友有一定的帮助. Microsoft.Spy工具是一个基础工具,我们简要介绍一下 ...

  3. 为ownCloud配置SSL连接

    为ownCloud配置SSL连接 在你开始使用ownCloud之前,强烈建议你在ownCloud中启用SSL支持.使用SSL可以提供重要的安全好处,比如加密ownCloud流量并提供适当的验证.在本教 ...

  4. Windows打印体系结构之Print Spooler概念与架构

    Windows打印体系结构之Print Spooler概念与架构Windows 思杰之路(陶菘) · 2016-09-06 22:07 房子好不好,对我而言始终都是肉体的栖居.对于灵魂,我从来不知道该 ...

  5. android R.id.转化为view

    LayoutInflater inflater=(LayoutInflater)getSystemService(Context.LAYOUT_INFLATER_SERVICE); View view ...

  6. Smarty 插件开发

    插件包含了: functions modifiers block functions compiler functions prefilters postfilters outputfilters r ...

  7. 2015第29周六Spring

    搜了一下Spring相关的经典书籍: <Spring实战(第3版)>从核心的Spring.Spring应用程序的核心组件.Spring集成3个方面,由浅入深.由易到难地对Spring展开了 ...

  8. 2014-08-04 BBS主页页面的设计

    今天是在吾索实习的第19天.这天,开始参照一开始设计的界面原型,真真正正地进行BBS界面的设计.在运用.NET进行界面设计时,发现没有用RP进行界面设计来得容易,很多都要再进行更精细的操作,才能达到原 ...

  9. Android视频录制

    public class MainActivity extends Activity { private MediaRecorder videoRecorder=null; private Butto ...

  10. Android 开发 对话框Dialog dismiss和hide方法的区别

    http://ningtukun.blog.163.com/blog/static/186541445201310151539697/ dismiss和hide方法都可以隐藏对话框,在需要的时候也可以 ...