边框

边框圆角

border-radius: 100px 每个角可以设置两个值,x和y

补充: 可分别设置长,短半径,以“/”进行分隔,遵循顺时针的顺序,“/”之前为横轴半径,“/”之后为纵轴半径,如: border-radius: 10px 10px 10px 10px/ 20px 20px 20px 20px

边框阴影

box-shadow: 10px 5px 13px #fff

  • 第一个值为水平偏移量,正值向右,负值向左
  • 第二个值为垂直偏移量,正值向下,负值向上
  • 第三个值为模糊度,不能为负值
  • 第四个值为阴影颜色
    补充:可以设置多个边框阴影,inset可以设置内阴影 如:box-shadow: inset 5px 10px 20px #f52,inset 8px 15px 10px #fff

边框图片

border-image: url(“路径”) 20px 20px round  简写属性

border-image-source: url(“路径”)  设置边框图片的地址

border-image-slice: 20 20  图像边框的向内偏移

border-image-width: 20px  指定边框的宽度

border-image-repeat: repeat平铺 / round铺满 / stretch拉伸

补充: round会自动调整尺寸,完整显示边框图片,而repeat单纯平铺多余的部分,会被剪裁,不能完整显示

渐变

线性渐变

linear-gradient: 线性渐变指沿着直线朝一个方向产生渐变效果

background:linear-gradient

to right,  表示方向(如left,right,top,bottom,也可以使用度数,如20deg)

#FFF,  渐变起始颜色

#aaa,  渐变终止颜色

);

径向渐变

radial-gradient: 径向渐变指从一个中心点沿着四周渐变

background: radial-gradient

100px at center,  表示围绕中心渐变。半径为100px,方向可以设置,如at left center,at 0px 0px

#aaa,  渐变起始颜色

#FFF,  渐变终止颜色

注意: 中心点的位置参照的是盒子的左上角,辐射范围可以不等,即可以是椭圆

);

背景

background-size: width,height  设置图片的宽度和高度 如:background-size: 100% auto

补充: background-size: cover  自动调整缩放比例,保证图片始终填充满背景区域,如有溢出会被隐藏

    background-size: contain  自动调整缩放比例,保证图片始终完整显示在背景区域

background-origin: 设置背景定位的起点,border-box以边框作为参考原点, padding-box以内边距作为参考原点,content-box以内容区作为参考原点

background-clip: 设置背景区域clip(裁切),border-box裁切边框以内作为背景区域,padding-box裁切内边距以内作为背景区域,content-box裁切内容区作为背景区域

过渡

transition: one,two  one为要过渡的属性,two为过渡的时间

transition-property: 设置过渡属性

transition-duration: 设置过渡时间

transition-timing-function: 设置控制速度linear(匀速),ease-in(加速)

transition-delay: 设置过渡延时

2D转换

转换可以实现元素的位移,旋转,变形,缩放等,在css3中通过transform(变形)来实现2d或3d转换

  • scale(x,y): 可以对元素进行水平和垂直方向的缩放,x和y取值可为小数,但不能为负数 如 选择器:hover{ transform: scale(10,10);}
  • translate(x,y): 可以改变元素的位置 如 选择器:hover{ transform: translate(-10px,-20px);}
  • rotate(deg): 对元素进行旋转,正值为顺时针,负值为逆时针 如 选择器:hover{ transform: rotate(-200deg);}

注意补充: 属性的作用对各个浏览器不一定有效,所以使用私有化前缀

  • -webkit-: 谷歌,苹果等
  • -moz-: 火狐
  • -ms-: IE
  • -o-: 欧朋

CSS3的常用属性(二)的更多相关文章

  1. CSS3 文本常用属性

    CSS 常用属性 text-shadow属性文字阴影:第一个值背景相对原本文字居左的距离,第二个值据当前文本上方的距离,第三个值清晰度(越小越清晰),第四个值颜色 word-wrap:自动换行,如果是 ...

  2. CSS3的常用属性(一)

    选择器 属性选择器(通过标签属性来选择) E[attr]: 表示只要元素<E>存在属性attr就能被选中  如: div[class] E[attr=val]: 表示元素<E> ...

  3. css3新增属性有哪些?css3中常用的新增属性总结

    css3新增属性有哪些?来提问这个问题的人都应该知道css3是css的升级版本,那么,css3既然是升级版本,自然是会新增一些属性,接下来本篇文章将给大家介绍关于css3中常用的新增属性. 一.css ...

  4. CSS3常用属性(边框、背景、文本效果、2D转换、3D转换、过渡、有过渡效果大图轮播、动画)

    CSS3边框: 1.CSS3圆角:border-radius  属性--创建边框线的圆角 <body style="font-size:24px; color:#60F;"& ...

  5. CSS3常用属性

    CSS是我们常用的控制网页样式和布局的一种标准. CSS3是最新的CSS标准. CSS3被拆分为"模块",旧的规范也已经拆分为小的块,同时还增加了新的属性. 一些比较重要的CSS3 ...

  6. TextView之二:常用属性

    参考自<疯狂android讲义>2.3节 //TextView所呈现的文字 android:text="我爱Java" //文字颜色 android:textColor ...

  7. web 开发:CSS3 常用属性——速查手册!

    web 开发:CSS3 常用属性——速查手册! CSS3 简介:http://www.runoob.com/css3/css3-intro.html 1.目录 http://caniuse.com/ ...

  8. TextView之二:常用属性 分类: H1_ANDROID 2013-10-30 12:43 3203人阅读 评论(0) 收藏

    参考自<疯狂android讲义>2.3节 //TextView所呈现的文字 android:text="我爱Java" //文字颜色 android:textColor ...

  9. CSS3 Generator提供了13个CSS3较为常用的属性代码生成工具,而且可以通过这款工具除了在线生成效果代码之外,还可以实时看到你修改的效果,以及浏览器的兼容性。

    CSS3 Generator提供了13个CSS3较为常用的属性代码生成工具,而且可以通过这款工具除了在线生成效果代码之外,还可以实时看到你修改的效果,以及浏览器的兼容性. CSS3 Generator ...

随机推荐

  1. Jquery validform

    一.validform是什么?            validform是一款智能的表单验证js插件,它是基于jQuery库与css,我们只需要把表单对象放入,             就可以对整个表 ...

  2. 编译libvlc。。。

    https://wiki.videolan.org/Win32Compile按照官网教程,安装所需工具,参考 :http://qjw.qiujinwu.com/blog/2014/12/08/cros ...

  3. pyspider architecture--官方文档

    原文地址:http://docs.pyspider.org/en/latest/Architecture/ Architecture This document describes the reaso ...

  4. windows上上传代码到Github

    Repository name: 仓库名称 Description(可选): 仓库描述介绍 Public, Private : 仓库权限(公开共享,私有或指定合作者) Initialize this ...

  5. 【AnjularJS系列6 】 过滤器

    第六篇,过滤器 AngularJS 过滤器可用于转换数据: 过滤器 描述 currency 格式化数字为货币格式. filter 从数组项中选择一个子集. lowercase 格式化字符串为小写. o ...

  6. MAC 下的pycharm部分使用方法

    1.在创建之初,可以选择自己想要使用的python版本. 如果之后想要更换Python版本,可以通过~~~更换选择Python版本. 2.创建.py文件,点击文件名,出现如下界面: 点击new--py ...

  7. js 时间戳 中国标准时间 年月日 日期之间的转换

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. gcp – 源于CP的高级命令行文件拷贝工具

    作者:linux 出处:http://linux.cn/thread/11868/1/1/ gcp – 源于CP的高级命令行文件拷贝工具 几周前,我们讨论了高级拷贝(修改于cp命令,让其可以显示复制进 ...

  9. d3代码如何改造成update结构(恰当处理enter和exit)

    d3的enter和exit 网上有很多blog讲解.说的还凑合的见:https://blog.csdn.net/nicolecc/article/details/50786661 如何把自己的rude ...

  10. Laravel 多条件搜索查询

    做查询功能时,输入的关键词有的为空,有的有值,如何实现多功能查询呢?这里介绍一种方法.(基于laravel) 原理很简单,第一步:判断接收的值,第二步:写查询语句.具体实现如下: //首先,创建句柄: ...