CSS3中的阴影,我知道的就是盒阴影文字阴影。两者使用大同小异。

1.文字阴影

不知道为啥阴影会被开发出来,觉得这没啥好用啊。用了之后发现好像还行,使页面更有立体感了那么一点点。看起来趣味性强一点。

文字阴影:

 text-shadow:x,y,z,color;
-x偏移量,x轴为文字左边
-y偏移量,y轴为文字顶部
-z:阴影模糊半径
-color:阴影颜色

理解x和y的含义,颜色可以叠加的,里面有代码!!!!

注意:阴影可以添加多层!注意;中间逗号间隔,并且需要是完整的一套(就是三个数字都要有)。
eg: (多层颜色,红色和绿色。)
text-shadow:10px 10px 5px red, 20px 20px 6px green;

偏移量设置小一点,是不是美美哒,想看效果请狠狠点击。里面有代码!!!!

2.盒阴影

大同小异啦,但是还是有不一样的地方,仔细看看啦。

盒阴影:

box-shadow:x,y,z,h,color;
- inset (可选:写的话就是内阴影,不写的话就是外阴影)
-x轴偏移
-y轴偏移
-阴影模糊半径
-扩展阴影半径 (是用阴影颜色,填充扩展半径后,再进行阴影模糊)
-color:阴影颜色

一个浮夸的带了阴影的盒子,里面有代码!!!!

3.文本省略

有时候文本太多装不下,怎么破???
使用文本省略,不再愁!!!

文本省略:
text-overflow:

  • ellipsis 省略
  • clip 剪切(不考虑使用,感官不好)

不使用文本省略时候的效果
使用文本省略,然鹅并没有效果

使用了文本省略为啥没有效果,因为中文文本会自动换行。
超出边框会溢出。
所以要配合
white-space:nowrap;(强制不换行)
overflow:hidden(溢出隐藏)

三个共同使用才有效果

CSS3中哪些新属性—阴影、文本省略(1)的更多相关文章

  1. HTML5 中的新属性autocomplete="off"失效的解决方法(兼容firefox,IE,360)

    因为业务需求,在写一个注册页面的时候,发现浏览器会自动填充此域名下已经保存的账号密码,给用户带来不便.加了HTML5 中的新属性autocomplete="off" ,但是并没有产 ...

  2. CSS3中的新特性

    一.CSS3新属性 CSS3还不属于W3C标准,所以不同浏览器的支持程度也不相同,对于不同浏览器,写法也不同,不同内核的浏览器要加不同的前缀,如下: transform:rotate(9deg); - ...

  3. css3的一些新属性及部分用法

    CSS3是CSS(层叠样式表)技术的升级版本,增加了很多新属性,我们在web开发中采用css3技术可以提高程序的性能以及用户体验.而且一般面试中会问到知道哪些新增加的属性,我们不可能将所有东西一一复述 ...

  4. CSS3中的一些属性

    1. 可匹配部分字符串 2. box-sizing属性 3. CSS3多栏布局 1.可匹配部分字符串 /*^运算符,匹配字符串首部*/ a[href^='http://website'] /*$运算符 ...

  5. css3的Background新属性

    前言 CSS3中出现了几种关于背景图片的新属性:background-origin.background-clip.background-position等.之前大致了解了下,但是background ...

  6. CSS中的字体属性和文本属性

    1.CSS字体的属性 font 简写,作用是把所有的针对字体的属性设置在一个声明中 font-family 设置字体系列 font-size 设置字体尺寸 font-style 设置字体风格,ital ...

  7. css3中的animation属性

    作用:通过给元素添加animation属性,可以赋予该元素动画效果. <!DOCTYPE html><html>    <head>        <styl ...

  8. css3中的scroll-behavior属性

    scroll-behavior属性 当用户手动导航或者 CSSOM scrolling API 触发滚动操作时,CSS 属性 scroll-behavior 为一个滚动框指定滚动行为,当用户通过鼠标滑 ...

  9. css3几个新属性

    1.text-shadow  文字阴影 p{ text-shadow:2px 2px 10px #000; } 四个参数,依次: a:水平偏移 b:垂直偏移 c:阴影程度 d:阴影颜色 2.word- ...

随机推荐

  1. Shell脚本中单引号(‘)和双引号(“)的使用区别

    在Linux操作系统上编写Shell脚本时候,我们是在变量的前面使用$符号来获取该变量的值,通常在脚本中使用”$param”这种带双引号的格式,但也有出现使用'$param'这种带引号的使用的场景,首 ...

  2. 【MM系列】SAP ABAP BAPI 和 RFC 的区别

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP ABAP BAPI 和 ...

  3. Value Iteration Algorithm for MDP

    Value-Iteration Algorithm: For each iteration k+1: a. calculate the optimal state-value function for ...

  4. [11期]绕过安全狗、云锁等各大WAF注入,上传深入自动化Bypass攻击

    CDN       负载均衡.内容分发 解析漏洞一般在服务层      二进制,溢出,提权在系统层         渗透测试就是以上全部层 协议未正确解析 GET改POST   这叫参数污染 cook ...

  5. Mac入门--通过homebrew下载过慢问题

    使用国内的镜像替换homebrew镜像,对镜像进行加速源 原先我们执行brew命令安装的时候,跟3个仓库地址有关 1 brew.git 2 homebrew-core.git 3 homebrew-b ...

  6. [Python3] 005 列表的基本使用

    目录 1. 列表概述 2. 创建列表 3. 列表常用操作 (1) 访问列表 (2) 分片操作 1) 正向操作 2) 反向操作 3) 内置函数 id() 加入队伍 1. 列表概述 一组有顺序的数据的组合 ...

  7. .net core 自定义中间件

    public class MyMiddleware { //private IConfiguration _configuration; //第一步: private RequestDelegate ...

  8. Java RPC 分布式框架性能大比拼,Dubbo排老几?

    来源:http://985.so/aXe2 Dubbo 是阿里巴巴公司开源的一个Java高性能优秀的服务框架,使得应用可通过高性能的 RPC 实现服务的输出和输入功能,可以和 Spring框架无缝集成 ...

  9. 基本数据类型间的运算(不包括boolean)

    一 基本数据类型的间的运算  (不包括boolean) 1.自动类型提升 : 小容量的变量和大容量的变量做运算结果用大容量的变量的类型来接收. byte , short , char -> in ...

  10. 问题 C: 序列交换

    问题 C: 序列交换 时间限制: 1 Sec  内存限制: 128 MB提交: 914  解决: 48[提交] [状态] [命题人:jsu_admin] 题目描述 给一个 1 到 n 的排列,每次可以 ...