CSS3:CSS3 文本效果

ylbtech-CSS3:CSS3 文本效果

 

1.返回顶部
1、

CSS3 文本效果


CSS3 文本效果

CSS3中包含几个新的文本特征。

在本章中您将了解以下文本属性:

  • text-shadow
  • box-shadow
  • text-overflow
  • word-wrap
  • word-break

浏览器支持

属性     
text-shadow4.010.03.54.09.5
box-shadow10.0
4.0 -webkit-
9.04.0
3.5 -moz-
5.1
3.1 -webkit-
10.5
text-overflow4.06.07.03.111.0
9.0 -o-
word-wrap23.05.53.56.112.1
word-break4.05.515.03.115.0

CSS3 的文本阴影

CSS3 中,text-shadow属性适用于文本阴影。

阴影效果!

您指定了水平阴影,垂直阴影,模糊的距离,以及阴影的颜色:

OperaSafariChromeFirefoxInternet Explorer

实例

给标题添加阴影:

h1 { text-shadow: 5px 5px 5px #FF0000; }

尝试一下 »


CSS3 box-shadow属性

CSS3 中 CSS3 box-shadow 属性适用于盒子阴影

实例

div { box-shadow: 10px 10px 5px #888888; }

尝试一下 »


接下来给阴影添加颜色

实例

div { box-shadow: 10px 10px grey; }

尝试一下 »


接下来给阴影添加一个模糊效果

实例

div { box-shadow: 10px 10px 5px grey; }

尝试一下 »


你也可以在 ::before 和 ::after 两个伪元素中添加阴影效果

实例

#boxshadow { position: relative; b ox-shadow: 1px 2px 4px rgba(0, 0, 0, .5); pa dding: 10px; bac kground: white; } #boxshadow img { width: 100%; border: 1px solid #8a4419; border-style: inset; } #boxshadow::after { content: ''; position: absolute; z-index: -1; /* hide shadow behind image */ box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3); width: 70%; left: 15%; /* one half of the remaining 30% */ height: 100px; bottom: 0; }

尝试一下 »


阴影的一个使用特例是卡片效果

实例

div.card { width: 250px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); text-align: center; }

文字卡片 » 图片卡片 »


CSS3 Text Overflow属性

CSS3文本溢出属性指定应向用户如何显示溢出内容

实例

p.test1 { white-space: nowrap; width: 200px; border: 1px solid #000000; overflow: hidden; text-overflow: clip; } p.test2 { white-space: nowrap; width: 200px; border: 1px solid #000000; overflow: hidden; text-overflow: ellipsis; }

尝试一下 »


CSS3的换行

如果某个单词太长,不适合在一个区域内,它扩展到外面:

CSS3中,自动换行属性允许您强制文本换行 - 即使这意味着分裂它中间的一个字:

CSS代码如下:

OperaSafariChromeFirefoxInternet Explorer

实例

允许长文本换行:

p {word-wrap:break-word;}

尝试一下 »


CSS3 单词拆分换行

CSS3 单词拆分换行属性指定换行规则:

CSS代码如下:

实例

p.test1 { word-break: keep-all; } p.test2 { word-break: break-all; }

尝试一下 »


新文本属性

属性描述CSS
hanging-punctuation规定标点字符是否位于线框之外。3
punctuation-trim规定是否对标点字符进行修剪。3
text-align-last设置如何对齐最后一行或紧挨着强制换行符之前的行。3
text-emphasis向元素的文本应用重点标记以及重点标记的前景色。3
text-justify规定当 text-align 设置为 "justify" 时所使用的对齐方法。3
text-outline规定文本的轮廓。3
text-overflow规定当文本溢出包含元素时发生的事情。3
text-shadow向文本添加阴影。3
text-wrap规定文本的换行规则。3
word-break规定非中日韩文本的换行规则。3
word-wrap允许对长的不可分割的单词进行分割并换行到下一行。3
2、
2.返回顶部
3.返回顶部
4.返回顶部
5.返回顶部
1、
http://www.runoob.com/css3/css3-text-effects.html
2、
6.返回顶部
warn作者:ylbtech
出处:http://ylbtech.cnblogs.com/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

转载于:https://www.cnblogs.com/storebook/p/8946307.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/251865.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

洛谷 P2296 寻找道路

题目描述 在有向图G 中,每条边的长度均为1 ,现给定起点和终点,请你在图中找一条从起点到终点的路径,该路径满足以下条件: 1 .路径上的所有点的出边所指向的点都直接或间接与终点连通。 2 .在满足…

Feature Preprocessing on Kaggle

刚入手data science, 想着自己玩一玩kaggle,玩了新手Titanic和House Price的 项目, 觉得基本的baseline还是可以写出来,但是具体到一些细节,以至于到能拿到的出手的成绩还是需要理论分析的。 本文旨在介绍kaggle比赛到各种原理与技巧&#xf…

如果您遇到文件或数据库问题,如何重置Joomla

2019独角兽企业重金招聘Python工程师标准>>> 如果您遇到Joomla站点的问题,那么重新安装其核心文件和数据库可能是最佳解决方案。 了解问题 这种方法无法解决您的所有问题。但它主要适用于由Joomla核心引起的问题。 运行Joomla核心更新后,这些…

Genymotion模拟器拖入文件报An error occured while deploying the file的错误

今天需要用到资源文件,需要将资源文件拖拽到sd卡中,但老是出现这个问题: 资源文件拖不进去genymotion。查看了sd的DownLoad目录,确实没有成功拖拽进去。 遇到这种问题的,我按下面的思路排查问题: Genymotio…

激光炸弹(BZOJ1218)

激光炸弹&#xff08;BZOJ1218&#xff09; 一种新型的激光炸弹&#xff0c;可以摧毁一个边长为R的正方形内的所有的目标。现在地图上有n(N<10000)个目标&#xff0c;用整数Xi,Yi(其值在[0,5000])表示目标在地图上的位置&#xff0c;每个目标都有一个价值。激光炸弹的投放是…

用servlet设计OA管理系统时遇到问题

如果不加单引号会使得除变量和int类型的值不能传递 转发和重定向的区别 转发需要填写完整路径&#xff0c;重定向只需要写相对路径。原因是重定向是一次请求之内已经定位到了服务器端&#xff0c;转发则需要两次请求每次都需要完整的路径。 Request和response在解决中文乱码时的…

[Usaco2010 Mar]gather 奶牛大集会

1827: [Usaco2010 Mar]gather 奶牛大集会 Time Limit: 1 Sec Memory Limit: 64 MB Submit: 1129 Solved: 525 [Submit][Status][Discuss]Description Bessie正在计划一年一度的奶牛大集会&#xff0c;来自全国各地的奶牛将来参加这一次集会。当然&#xff0c;她会选择最方便的…

1-1、作用域深入和面向对象

课时1&#xff1a;预解释 JS中的数据类型 number、string、 boolean、null、undefined JS中引用数据类型 object: {}、[]、/^$/、Date Function var num12; var obj{name:白鸟齐鸣,age:10}; function fn(){ console.log(勿忘初心方得始终&#xff01;) }console.log(fn);//把整…

JWT协议学习笔记

2019独角兽企业重金招聘Python工程师标准>>> 官方 https://jwt.io 英文原版 https://www.ietf.org/rfc/rfc7519.txt 或 https://tools.ietf.org/html/rfc7519 中文翻译 https://www.jianshu.com/p/10f5161dd9df 1. 概述 JSON Web Token&#xff08;JWT&#xff09;是…

验证Oracle收集统计信息参数granularity数据分析的力度

最近在学习Oracle的统计信息这一块&#xff0c;收集统计信息的方法如下&#xff1a; DBMS_STATS.GATHER_TABLE_STATS (ownname VARCHAR2, ---所有者名字tabname VARCHAR2, ---表名partname VARCHAR2 DEFAULT NULL, ---要分析的分区名estimate_percent NUMBER DEFAULT NULL, …

Python之NumPy(axis=0 与axis=1)区分

Python之NumPy&#xff08;axis0 与axis1&#xff09;区分 转载于:https://www.cnblogs.com/greatljg/p/10802392.html

20165320 第九周学习总结

主要内容&#xff1a; 1.URL类 URL类是java.net包中的一个重要的类&#xff0c;使用URL创建对象的应用程序称为客户端程序。URL 的构造方法&#xff1a;try { URL url new URL ("http://www.google.com"); } catch (MalformedURLException e) {System.out.println(&…

Python 函数的执行流程-函数递归-匿名函数-生成器

1 函数的执行流程函数的执行需要对函数进行压栈的&#xff0c;什么是压栈呢&#xff0c;简而言之就是在函数执行时在栈中创建栈帧存放需要变量以及指针的意思。具体涉及的知识非常多&#xff0c;这里就已一个Python脚本简单进行分析。当我们运行上面代码时&#xff0c;它的执行…

【2】信息的表示和处理

1.现代计算机存储和处理的信息都以二值信号表示。 2.机器为什么要使用二进制进行存储和处理&#xff1f; 答&#xff1a;二值信号能够很容易的被表示、存储、传输。例如&#xff1a; 可以表示为穿孔卡片上有洞和无洞、导线上的高压和低压&#xff0c;顺逆时针的磁场。 3.大多数…

java版b2b2c社交电商spring cloud分布式微服务(二) 服务消费者(rest+ribbon)

一、ribbon简介 Ribbon is a client side load balancer which gives you a lot of control over the behaviour of HTTP and TCP clients. Feign already uses Ribbon, so if you are using FeignClient then this section also applies. —–摘自官网 ribbon是一个负载均衡客…

[学习笔记]支配树

被支配树支配的恐惧 定义 显然&#xff0c;这个支配关系是一个树&#xff08;或者如果有的点不能从r到达&#xff0c;就是一个树一堆点&#xff09;。 首先不会成环&#xff0c;其次也不会是DAG 即如果A支配C&#xff0c;B支配C&#xff0c;那么A和B之间必然有支配关系 解法 首…

RBAC 权限设计(转载)

来源 &#xff1a;https://blog.csdn.net/rocher88/article/details/43190743 这是我在网上找的一些设计比较好的RBAC权限管理不知道&#xff0c;像新浪、搜狐、网易、百度、阿里巴巴、淘宝网的RBAC用户权限这一块&#xff0c;都是这种细颗粒的RBAC设计开发&#xff0c;还是把他…

20172311 2017-2018-2 《程序设计与数据结构》第八周学习总结

20172311 2017-2018-2 《程序设计与数据结构》第八周学习总结 教材学习内容总结 本周对JAVA中的多态性进行了学习 多态性引用能够随时间变化指向不同类型的对象&#xff0c;是通过后绑定实现的。实现多态性的主要途径有两种&#xff1a; 1.由继承实现多态性 2.利用接口实现多态…

Linux系统安装Apache 2.4.6

http://www.cnblogs.com/kerrycode/p/3261101.html Apache简介 Apache HTTP Server&#xff08;简称Apache&#xff09;是Apache软件基金会的一个开放源码的网页服务器&#xff0c;可以在大多数计算机操作系统中运行&#xff0c;由于其多平台和安全性被广泛使用&#xff0c;是最…

lnmp化境开启pathinfo,支持tp5.0等访问

一、 开启pathinfo   #注释 下面这一行 #include enable-php.conf #载入新的配置文件 include enable-php-pathinfo.conf #添加如下location / {if (!-e $request_filename){rewrite ^/(.*)$ /index.php/$1 last;break;}}location ~ /index.php {fastcgi_pass 127.0.0.1:…