博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
(四)CSS常用特效属性
阅读量:5938 次
发布时间:2019-06-19

本文共 1041 字,大约阅读时间需要 3 分钟。

  hot3.png

前言:我们这里只总结一些主流的属性,即我们经常用的属性,如圆角,渐变,动画,阴影,透明度等等。因为css3这些高级属性或规则尚未成为W3C标准一部分,所以我们在使用这些高级css属性时,需要专门指定这些浏览器,即在属性的前面加上这些主流浏览器的标识符。例如:-webkit-代表Chrome、Safari,-moz-代表Firefox,-ms-代表IE,-o-代表Opera。需要注意的是我们先写私有属性,再写标准的属性。下面我们分别说明一些这些特效。

1.圆角边框特效:

border-radius:x/y;/*x:水平,y:垂直,其中y可以不写,默认与x值相同,而且"x/y"这个可以有1-4个参数*/

  • 1个参数:4个角效果都一样
  • 2个参数:上左(top-left)和下右(bottom-right)代表第1个参数,上右(top-right)和下左(bottom-left)代表第2个参数。
  • 3个参数:第1个用于上左(top-left),第二个用于上右(top-right)、下左(bottom-left),第三个用于下右(bottom-right)。

2.多背景特效:

background:url(image) position/size repeat,url(image) position size repeat,url(image) position size repeat;

  • image:指定对象的背景图像。可以是真实图片路径或使用渐变创建的“背景图像”
  • postion:指定对象的背景图像位置。x y
  • size:指定对象的背景图像的尺寸大小。和position一起定义x y/m n(auto,contain,cover)
  • repeat:指定对象的背景图像如何铺排填充。no-rapeat | repeat | repeat-x | repeat-y | space | round,round:背景图像自动缩放直到适应且填充满整个容器。space:背景图像以相同的间距平铺且填充满整个容器或某个方向。(CSS3)

3.字体阴影特效:

text-shadow:x y z color,{1-n}?

  • x:代表阴影向右偏移量
  • y:代表阴影向左偏移量
  • z:代表阴影的半径多大
  • color:代表阴影的颜色,可以用rgba模式
  • {1-n}?:代表整个可以设置多个阴影,中间用逗号隔开

                       

转载于:https://my.oschina.net/hpuwxy/blog/777554

你可能感兴趣的文章
【干货】界面控件DevExtreme视频教程大汇总!
查看>>
闭包 !if(){}.call()
查看>>
python MySQLdb安装和使用
查看>>
Java小细节
查看>>
poj - 1860 Currency Exchange
查看>>
chgrp命令
查看>>
Java集合框架GS Collections具体解释
查看>>
洛谷 P2486 BZOJ 2243 [SDOI2011]染色
查看>>
linux 笔记本的温度提示
查看>>
数值积分中的辛普森方法及其误差估计
查看>>
Web service (一) 原理和项目开发实战
查看>>
跑带宽度多少合适_跑步机选购跑带要多宽,你的身体早就告诉你了
查看>>
广平县北方计算机第一届PS设计大赛
查看>>
深入理解Java的接口和抽象类
查看>>
java与xml
查看>>
Javascript异步数据的同步处理方法
查看>>
iis6 zencart1.39 伪静态规则
查看>>
SQL Server代理(3/12):代理警报和操作员
查看>>
基于事件驱动的DDD领域驱动设计框架分享(附源代码)
查看>>
Linux备份ifcfg-eth0文件导致的网络故障问题
查看>>