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. python 正则表达式 re.search

    #coding:utf-8 import re #将正则表达式编译为pattern对象 #compile(pattern, flags=0) #Compile a regular expression ...

  2. 倾旋之slack主题协同

    源:https://pocketcorp.slack.com/join/shared_invite/enQtNTk2MDYwNDA4NzU0LTg3ZGVlNDE5NWUzNjJhZTc1MDQ5MT ...

  3. SSM003/构建Maven单模块项目(一)

    一.环境准备 1.开发工具:IDEA 2.JDK版本:jdk1.8 3.Maven版本:apache-maven-3.2.5 4.数据库mysql. 二.基于Maven构建web项目 Step1:Fi ...

  4. 通过document.domain实现跨域访问

    通过document.domain实现跨域访问:https://blog.csdn.net/nlznlz/article/details/79506655 前端跨域方法之document.domain ...

  5. User-Agent结构介绍及主流浏览器User-Agent大全

    User-Agent结构介绍及主流浏览器User-Agent大全:https://blog.csdn.net/qianxing111/article/details/79415857 一.基础知识篇: ...

  6. 关于Python程序的运行方面,有什么手段能提升性能?

    1.使用多进程,充分利用机器的多核性能 2.对于性能影响较大的部分代码,可以使用C或C++编写 3.对于IO阻塞造成的性能影响,可以使用IO多路复用来解决 4.尽量使用Python的内建函数 5.尽量 ...

  7. P5504 [JSOI2011]柠檬

    传送门 显然考虑 $dp$ ,发现从右往左和从左往右是一样的,所以只考虑一边就行 发现对于切的左右端点,选择的 $s0$ 一定要为左右端点的贝壳大小,不然这个端点不产生贡献还不如分开来单个贡献 所以设 ...

  8. http的Content-Encoding和Content-Type及服务器和客户端处理流程

    比如,A 给 B发送了一条信息:hello,首先,A要告诉B,我给你发的这条数据的类型,不同类型的数据,接收方的处理方式不一样,hello属于文本类型,所以Content-Type就要设置成 text ...

  9. websocket无法注入bean问题解决方案

    websocket服务端往往需要和服务层打交道,因此需要将服务层的一些bean注入到websocket实现类中使用,但是呢,websocket实现类虽然顶部加上了@Component注解,依然无法通过 ...

  10. 深入JavaScript之获取cookie以及删除cookie

    cookie存在哪? 存在document.cookie中 ookie长啥样? cookie是一个字符串,长下面这样:“name=xxx; age=22;” 注意:分号后面有个空格,记住这一点,下面的 ...