CSS3中哪些新属性—阴影、文本省略(1)
CSS3中的阴影,我知道的就是盒阴影和文字阴影。两者使用大同小异。
1.文字阴影
不知道为啥阴影会被开发出来,觉得这没啥好用啊。用了之后发现好像还行,使页面更有立体感了那么一点点。看起来趣味性强一点。
文字阴影:
text-shadow:x,y,z,color;
-x偏移量,x轴为文字左边
-y偏移量,y轴为文字顶部
-z:阴影模糊半径
-color:阴影颜色
注意:阴影可以添加多层!注意;中间逗号间隔,并且需要是完整的一套(就是三个数字都要有)。
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)的更多相关文章
- HTML5 中的新属性autocomplete="off"失效的解决方法(兼容firefox,IE,360)
因为业务需求,在写一个注册页面的时候,发现浏览器会自动填充此域名下已经保存的账号密码,给用户带来不便.加了HTML5 中的新属性autocomplete="off" ,但是并没有产 ...
- CSS3中的新特性
一.CSS3新属性 CSS3还不属于W3C标准,所以不同浏览器的支持程度也不相同,对于不同浏览器,写法也不同,不同内核的浏览器要加不同的前缀,如下: transform:rotate(9deg); - ...
- css3的一些新属性及部分用法
CSS3是CSS(层叠样式表)技术的升级版本,增加了很多新属性,我们在web开发中采用css3技术可以提高程序的性能以及用户体验.而且一般面试中会问到知道哪些新增加的属性,我们不可能将所有东西一一复述 ...
- CSS3中的一些属性
1. 可匹配部分字符串 2. box-sizing属性 3. CSS3多栏布局 1.可匹配部分字符串 /*^运算符,匹配字符串首部*/ a[href^='http://website'] /*$运算符 ...
- css3的Background新属性
前言 CSS3中出现了几种关于背景图片的新属性:background-origin.background-clip.background-position等.之前大致了解了下,但是background ...
- CSS中的字体属性和文本属性
1.CSS字体的属性 font 简写,作用是把所有的针对字体的属性设置在一个声明中 font-family 设置字体系列 font-size 设置字体尺寸 font-style 设置字体风格,ital ...
- css3中的animation属性
作用:通过给元素添加animation属性,可以赋予该元素动画效果. <!DOCTYPE html><html> <head> <styl ...
- css3中的scroll-behavior属性
scroll-behavior属性 当用户手动导航或者 CSSOM scrolling API 触发滚动操作时,CSS 属性 scroll-behavior 为一个滚动框指定滚动行为,当用户通过鼠标滑 ...
- css3几个新属性
1.text-shadow 文字阴影 p{ text-shadow:2px 2px 10px #000; } 四个参数,依次: a:水平偏移 b:垂直偏移 c:阴影程度 d:阴影颜色 2.word- ...
随机推荐
- 001--PowerDesigner连接MySQL
PowerDesigner连接MySQL(一) 博客地址:https://blog.csdn.net/codemonkey_king/article/details/53263597 https:// ...
- html—倒计时demo
<!doctype html> <html> <head> <meta charset="utf-8"> </head> ...
- Linux基础:Linux环境下安装JDK
title: Linux基础:JDK的及环境变量配置 author: Enjoyitlife.top date: 2019-10-09 20:50:36 tags: Linux JDK categor ...
- Soap从入门到实战
Soap从入门到实战 参考文章:https://howtodoinjava.com/spring-boot/spring-soap-client-webservicetemplate/ 使用的技术:s ...
- C语言 malloc()、memcpy()、free()等
1.malloc()函数: void *malloc(unsigned int num_bytes); 头文件:#include <malloc.h> 或 #include <al ...
- DB2创建库 数据恢复
例:数据库:PRODB2用户 :DB2ADMIN/DB2ADMIN备份库路径:D:/bank 一.恢复数据库1.启动数据库运行->db2cmd->db2Db2=>start db m ...
- 《剑指offer》面试题21 包含min函数的栈 Java版
(min函数的作用是返回栈内最小值) 首先这个栈要具有普通栈所具有的push()和pop()方法,那么内部一定包含一个Stack.至于还要能实现min函数,而且还是在O(1)时间复杂度内,我们不得不考 ...
- [2019杭电多校第二场][hdu6602]Longest Subarray(线段树)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6602 题目大意为求最长的区间,满足C种数字在区间内要么不出现,要么出现的次数都不小于K. 大致的分析一 ...
- CentOS 下 redis 安装与配置
CentOS 下 redis 安装与配置 1.到官网上找到合适版本下载解压安装 [root@java src]# wget -c http://redis.googlecode.com/files ...
- 洛谷 - P3391 【模板】文艺平衡树(Splay) - 无旋Treap
https://www.luogu.org/problem/P3391 使用无旋Treap维护序列,注意的是按顺序插入的序列,所以Insert实际上简化成直接root和Merge合并,但是假如要在序列 ...