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. MyBatis Generator 生成的example 使用 and or 简单混合查询

    MyBatis Generator 生成的example 使用 and or 简单混合查询 参考博客:https://www.cnblogs.com/kangping/p/6001519.html 简 ...

  2. mysql 函数 时间函数,数学函数,字符串函数,条件判断函数

    =========================================== mysql 相关函数 ============================================= ...

  3. pytony格式化输出-占位符

    1. %s s = string 字符串 2. %d d = digit 整数 3. %f f = float 浮点数 #!/usr/bin/env python #_*_coding:utf-8_* ...

  4. Java核心技术

    [Java核心技术36讲]1.谈谈你对Java平台的理解 2.Exception和Error有什么区别 3.谈谈final.finally.finalize有什么不同?4.强引用.软引用.弱引用.虚引 ...

  5. Billboard 题解 hdu2795

    Billboard 题解 hdu2795 题意 有个广告牌,上面需要依次贴广告,广告的高度均为1,但是宽度不同,每次都想贴在最靠左上的位置,按照顺序进行广告的话,输出每个广告位于广告牌的高度. 解题思 ...

  6. Appium+Python之异常自动截图

    运行过程中出现异常情况,我们怎么直观的看到呢?最简单的方法就是可以把异常现象截图下来. 思路:我这里采用get_screenshot_as_file(filename)方法,filename通过获取时 ...

  7. js中的回调地狱 Callback to Hell

        本文重点:解决方式:1.promise  2. 拆解 function:将各步拆解为单个的 function  3. 通过 Generator 函数暂停执行的效果方式 4. 通过ES8的异步函 ...

  8. openstack stein部署手册 4. glance

    # 建立数据库用户及权限 create database glance; grant all privileges on glance.* to glance@'localhost' identifi ...

  9. Windows 10 系统获取密钥方法

    方法一: 快捷键 win+R 打开运行窗口,输入 regedit 打开注册表编辑器,选择 HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows NT\Curren ...

  10. docker安装es

    下载镜像 docker pull docker.elastic.co/elasticsearch/elasticsearch:6.8.1 创建容器并映射docker run -e ES_JAVA_OP ...