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. struts2 token 防止表单重复提交

    1.jsp页面  输入框,提交按钮 <%@ page language="java" contentType="text/html" pageEncodi ...

  2. 安全运维 - Linux系统攻击应急响应

    Linux 应急相应 - 总纲 应急准备: 制定应急策略 组建应急团队 其他应急资源 安全事件处理: 痕迹数据获取 分析.锁定攻击源删除可疑账号关闭异常进程.端口禁用相应异常开机启动项删除异常定时任务 ...

  3. SQL语句创建函数

    ----先create,再alter alter function fuc (@userid int,@strWhere varchar(max),@strWhere2 varchar(max) )  ...

  4. [LeetCode]29 两数相除和一个小坑点

    给定两个整数,被除数 dividend 和除数 divisor.将两数相除,要求不使用乘法.除法和 mod 运算符. 返回被除数 dividend 除以除数 divisor 得到的商. 示例 1: 输 ...

  5. python控制流-导入模块

    一.模块 1.含义 Python 程序可以调用一组基本的函数,这称为“内建函数”,包括你见到过的 print().input()和 len()函数.Python 也包括一组模块,称为“标准库”.每个模 ...

  6. STL 仿函数(函数对象)

    ##定义 仿函数(functor):一种具有函数性质的对象. 仿函数在C++中的新名称为函数对象(function object). 仿函数类对象像函数一样被调用,调用仿函数类对象时,实际调用的是仿函 ...

  7. Git-第四篇廖雪峰Git教程学习笔记(3)远程仓库,克隆远端库

    1.本次连接的是gitHub仓库. 1>创建SSH Key. ssh-keygen -t rsa -C "youremail@example.com" lfy@lfy-PC ...

  8. HDU-6187.DestroyWalls(最大生成树)

    好吧这个题没什么可说的,有点.... 一开始还和一位大佬在讨论,会不会有多余的边,后面看了题发现没有多于的边和自环,所以之间一波最大生成树把最大的边去掉,把最小的边推倒就行了. #include &l ...

  9. java_第一年_JDBC(5)

    事务概念:事务指逻辑上的一组操作,组成这组操作的各个单元,要不全部成功,要不全部不成功: 开始事务:start transaction 提交事务:commit 回滚事务:rollback 事务的四大特 ...

  10. C/C++表达式求值问题

    转载:https://originlee.com/2016/05/01/eval-expression-in-c-and-cpp/ 前几日,一个刚学编程的老朋友问了我一个问题: int i = 0;i ...