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- ...
随机推荐
- CentOS 7 关闭启动防火墙
关闭firewall:systemctl stop firewalld.service #停止firewallsystemctl disable firewalld.service #禁止firewa ...
- Codeforces 691E题解 DP+矩阵快速幂
题面 传送门:http://codeforces.com/problemset/problem/691/E E. Xor-sequences time limit per test3 seconds ...
- Photoshop制作Android UI:怎样从大图片中准确剪切出圆角正方形 图片
如题所看到的,最初我是直接用PS的剪切工具,但发现有时不太好用. 由于你必须提前设好要剪切的尺寸. 也可能是我这小白不知道咋用. 下为摸索到的最好方法: 1.打开原图.新建图层,假设是png图片就不用 ...
- Dubbo一文入门
一.简介 系统的架构,已从最早的单体式架构(一个war包完事)逐渐发展到目前的微服务式架构.微服务,将一个大型的复杂的应用系统,拆分成若干独立的松耦合的小的服务工程,每个服务工程可独立部署,每个服务只 ...
- pg_resetxlog - 重置一个 PostgreSQL 数据库集群的预写日志以及其它控制内容
SYNOPSIS pg_resetxlog [ -f ] [ -n ] [ -o oid] [ -x xid] [ -l fileid,seg] datadir DESCRIPTION 描述 pg_r ...
- 脚本_统计 Linux 进程相关数量信息
#!bin/bash#作者:liusingbon#功能:统计 Linux 进程相关数量信息,running(运行的进程),sleeping(睡眠中的进程),stoped(停止的进程),zombie(僵 ...
- python数据分析第二版:numpy
一:Numpy # 数组和列表的效率问题,谁优谁劣 # 1.循环遍历 import numpy as np import time my_arr = np.arange(1000000) my_lis ...
- POJ 2960 S-Nim (sg函数)
题目链接:http://poj.org/problem?id=2960 题目大意:给定数组S,接下来给出m个游戏局面.游戏局面是一些beads堆,先给出堆数,然后是每一堆中beads的数目.游戏规则是 ...
- Python---编辑器安装和print函数
Python---编辑器安装和print函数 -------------------------------------------------------- 一.Python是什么? Python是 ...
- JavaWeb(八):Filter和Listener
一.Filter 1.1 概述 Filter 的基本功能是对 Servlet 容器调用 Servlet 的过程进行拦截,从而在 Servlet 进行响应处理的前后实现一些特殊的功能.在 Servlet ...