CSS3的常用属性(二)
边框
边框圆角
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的常用属性(二)的更多相关文章
- CSS3 文本常用属性
CSS 常用属性 text-shadow属性文字阴影:第一个值背景相对原本文字居左的距离,第二个值据当前文本上方的距离,第三个值清晰度(越小越清晰),第四个值颜色 word-wrap:自动换行,如果是 ...
- CSS3的常用属性(一)
选择器 属性选择器(通过标签属性来选择) E[attr]: 表示只要元素<E>存在属性attr就能被选中 如: div[class] E[attr=val]: 表示元素<E> ...
- css3新增属性有哪些?css3中常用的新增属性总结
css3新增属性有哪些?来提问这个问题的人都应该知道css3是css的升级版本,那么,css3既然是升级版本,自然是会新增一些属性,接下来本篇文章将给大家介绍关于css3中常用的新增属性. 一.css ...
- CSS3常用属性(边框、背景、文本效果、2D转换、3D转换、过渡、有过渡效果大图轮播、动画)
CSS3边框: 1.CSS3圆角:border-radius 属性--创建边框线的圆角 <body style="font-size:24px; color:#60F;"& ...
- CSS3常用属性
CSS是我们常用的控制网页样式和布局的一种标准. CSS3是最新的CSS标准. CSS3被拆分为"模块",旧的规范也已经拆分为小的块,同时还增加了新的属性. 一些比较重要的CSS3 ...
- TextView之二:常用属性
参考自<疯狂android讲义>2.3节 //TextView所呈现的文字 android:text="我爱Java" //文字颜色 android:textColor ...
- web 开发:CSS3 常用属性——速查手册!
web 开发:CSS3 常用属性——速查手册! CSS3 简介:http://www.runoob.com/css3/css3-intro.html 1.目录 http://caniuse.com/ ...
- TextView之二:常用属性 分类: H1_ANDROID 2013-10-30 12:43 3203人阅读 评论(0) 收藏
参考自<疯狂android讲义>2.3节 //TextView所呈现的文字 android:text="我爱Java" //文字颜色 android:textColor ...
- CSS3 Generator提供了13个CSS3较为常用的属性代码生成工具,而且可以通过这款工具除了在线生成效果代码之外,还可以实时看到你修改的效果,以及浏览器的兼容性。
CSS3 Generator提供了13个CSS3较为常用的属性代码生成工具,而且可以通过这款工具除了在线生成效果代码之外,还可以实时看到你修改的效果,以及浏览器的兼容性. CSS3 Generator ...
随机推荐
- SQL 数据库性能优化
http://blog.csdn.net/yzllz001/article/details/54848513 1. 减少数据访问(减少磁盘访问) 2. 返回更少数据(减少网络传输或磁盘访问) 3. ...
- IOC-Castle Windsor映射
Castle最早在2003年诞生于Apache Avalon项目,目的是为了创建一个IOC(控制反转)框架.发展到现在已经有四个组件了,分别是ActiveRecord(ORM组件),Windsor(I ...
- 微信小程序分享朋友圈的实现思路与解决办法
实现思路 那么既然小程序没有分享到朋友圈的api,我们怎么实现分享到朋友圈呢,下面我介绍一下实现思路. 既然没有捷径,那就走复杂一点的路线,那就是需要用户手动分享到朋友圈,问题又来了,用户手动分享的话 ...
- 【摘录】JAVA内存管理-自动选择垃圾收集器算法
在J2SE 5.0,垃圾收集的默认值:垃圾收集器.堆大小以及JVM的类型(客户端还是服务器)都会根据应用运行的硬件平台和操作系统自动选择.相比之前设置命令行参数的方式,自动选择很好的匹配了不同类型的应 ...
- JS中通过LayUI的layer.prompt弹出文本输入层,多个按钮回调获取输入值
JS中通过LayUI弹出文本输入层,多个按钮回调: 如图所示,输入文本后点击通过/不通过按钮回调获取输入文本值的实现: 实现JS: layer.prompt({ formType: 2, // 弹出文 ...
- mySql 使用 SQL 文件脚本 failed to open file 注意事项
1.路径不要有中文,其实最好是全英文 2.路径可以有空格 3.路径两头不要加引号 4.作为一个MySQL命令,source C:/lib/a.sql; 后边的分号是要的. 5.使用 unix 路径风格 ...
- WePy--使用zanUI组件
因为Wepy 中不能直接引入zanUI组件, 好在还有百度, 参考链接 https://github.com/brucx/wepy-zanui-demo (感谢); 我的做法是将 源码下了下来, 源码 ...
- CSS布局总结(二)
前言:今天实训课依旧很水,继续总结,今天主要补了一下布局的知识.响应式的作业还没做完... 一.两列布局 html部分 <div class="parent"> < ...
- vue无缝滚动的插件开发填坑分享
写插件的初衷 1.项目经常需要无缝滚动效果,当时写jq的时候用用msClass这个老插件,相对不上很好用. 2.后来转向vue在vue-awesome没有找到好的无缝滚动插件,除了配置swiper可以 ...
- Linux 操作系统启动流程
1.加载bios bios中包含的硬件CPU 内存 硬盘等相关信息 2.读取MBR 读取完bios信息之后,计算机会查找bios制定的硬盘MBR引导扇区,将其内容复制到 0x7c00 地址所在的物理内 ...