Css3小技术


 圆角border-radius

    border-radius:length
    *注: 这是一个缩写,相当于四个角设置同样的值,用px或者百分比都可以,想要成为圆形,就用50%,你也可以单独设置每个角,语法和设置边框有的一拼,例如border-radius:5px 2px 4px 1px,分别是左上、右上、右下、左下,border-top-left-radius:5px;兼容IE9+、Firefox 4+、Chrome、Safari 5+ 以及 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 0%, #D4D4D4 50%, #C5C5C5 50%, #ADADAD 100%);linear-gradient是线性渐变,radial-gradient是径向渐变,我们这里的按钮时用线性的,top是从上到下、left是从左到右,如果定义成left top,那就是从左上角到右下角,我写了个center,可以去掉,#ddd 0%这个是起始颜色的意思,#ADADAD 100%结束颜色,中间可以按自己的需求添加各种百分比位置的颜色,我那个50%是指中间部位,第一个50%是前半程的结束颜色,第二个50%是后半程的起始颜色
    再看下webkit内核的写法,background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #ddd), color-stop(0.5, #D4D4D4), color-stop(0.5, #C5C5C5), color-stop(1, #ADADAD));linear线性渐变写到了括号里边,然后是一对起始坐标,一对结束坐标,可以用具体数字也可以用关键位置,我用的关键位置代表左上到左下,你得脑海里是不是出现了一条竖着的直线,对了,在往后边的参数看color-stop(0, #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 50%,rgba(255,255,255,0.3))这个参数组合你可以直接用的,就是一个遮罩的用处。
时间: 2024-10-03 02:00:37

Css3小技术的相关文章

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

手把手教你玩转 CSS3 3D 技术 要玩转css3的3d,就必须了解几个词汇,便是透视(perspective).旋转(rotate)和移动(translate).透视即是以现实的视角来看屏幕上的2D事物,从而展现3D的效果.旋转则不再是2D平面上的旋转,而是三维坐标系的旋转,就包括X轴,Y轴,Z轴旋转.平移同理. 当然用理论来说明,估计你还不明白.下面是3个gif: 沿着X轴旋转 沿着Y轴旋转 沿着Z轴旋转 旋转应该没问题了,那理解平移起来就比较容易了,就是在在X轴.Y轴.z轴移动. 你可能

你需要知道的CSS3 动画技术

译自:你需要知道的CSS3 动画技术 译自:What You Need To Know About Behavioral CSS 请尊重版权,转载须注明本站链接! 译序:本文译自Smashingmagazine,但是原文讲述的内容有些浅,也不是很完整,前端观察在翻译的前提下,增加了更多的更系统的内容.如有不足之处,欢迎指正补充. 随着网络的发展,浏览器具有更强的渲染更高级代码的能力,我们正逐步实现跨越所有平台和浏览器的目标.我们不但可以要花费更少的时间来确保我们的盒模型在IE6中看起来正常,而且

css3小总结

一.边框 1.border-radius:x,y,模糊半径,color(x为负数时左移动,y为负数是上移动) 2.box-radius:x,y,模糊半径,阴影半径,color 3.border-image:url() 切割图片的大小 repeat/round(平铺)/stretch(拉伸).(*) 二.文字与字体 1.text-shadow:x,y,模糊半径,color; [email protected]{ font-family:"mooc " url(字体服器上的链接地址): }

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

***********************************************声明***********************************************************************  原创作品,出自 "深蓝的blog" 博客,欢迎转载,转载时请务必注明出处,否则追究版权法律责任. 深蓝的blog:http://blog.csdn.net/huangyanlong/article/details/39718485 *******

大牛带你玩转 CSS3 3D 技术

css3的3d起步 要玩转css3的3d,就必须了解几个词汇,便是透视(perspective).旋转(rotate)和移动(translate).透视即是以现实的视角来看屏幕上的2D事物,从而展现3D的效果.旋转则不再是2D平面上的旋转,而是三维坐标系的旋转,就包括X轴,Y轴,Z轴旋转.平移同理. 当然用理论来说明,估计你还不明白.下面是3个gif: 沿着X轴旋转 沿着Y轴旋转 沿着Z轴旋转 旋转应该没问题了,那理解平移起来就比较容易了,就是在在X轴.Y轴.z轴移动. 你可能会说透视比较不好理

CSS3 小黄人案例

使用 CSS3 和 HTML5 制作一个小黄人. 结构代码: 1 <div class="wrap"> 2 <!-- 头发 --> 3 <div class="hair"> 4 <div class="hair_1"></div> 5 <div class="hair_2"></div> 6 </div> 7 <!-- 身体

tableviewCell实用小技术

1. 隐藏tableViewCell的分割线: tableView.separatorStyle = UITableViewCellSeparatorStyleNone; 2.实现右侧的小灰色箭头 只要将cell的accessoryType属性设置为 cell.accessoryType=UITableViewCellAccessoryDisclosureIndicator; //关闭tableView顶部的cell冒出来的白色空隙 self.automaticallyAdjustsScroll

小技术 c,c++,单片机,电路免费指导入门

不会C也不会电路没关系,电学知识高中水平就可以.刚好自己想从头给自己再来一遍基础知识巩固,想带几个门外汉子一起学.一来帮助别人起步,二来自己加深理解等大家都上路了就一起做点小东西玩玩.一起发现问题,一起解决问题,也有个照应只要有四五个人愿意学我就尽我能力给你们讲解,我希望是真心想走这条路的人,而不是为了应付考试毕业设计之类的朋友.最好是有电脑有板子的,或者是自己有条件想焊板子的.不动手的单片机我看是学不好的.绝对不打广告,不推销任何元器件.只做技术交流凑齐四五个人,只要真心,肯坚持,肯吃苦的,我

css3 小三角的用法

<div class="arrow-up"> <!--向上的三角--> </div> <div class="arrow-down"> <!--向下的三角--> </div> <div class="arrow-left"> <!--向左的三角--> </div> <div class="arrow-right"&