http://www.sufeinet.com/plugin.php?id=keke_group

苏飞论坛

 找回密码
 马上注册

QQ登录

只需一步,快速开始

分布式系统框架(V2.0) 轻松承载百亿数据,千万流量!讨论专区 - 源码下载 - 官方教程

HttpHelper爬虫框架(V2.7-含.netcore) HttpHelper官方出品,爬虫框架讨论区 - 源码下载 - 在线测试和代码生成

HttpHelper爬虫类(V2.0) 开源的爬虫类,支持多种模式和属性 源码 - 代码生成器 - 讨论区 - 教程- 例子

查看: 3410|回复: 5

[CSS] 【零基础学习web前端】CSS3-文本效果(文本阴影、自动换行)

[复制链接]
发表于 2018-12-7 16:52:42 | 显示全部楼层 |阅读模式
【零基础学习web前端】CSS3-文本效果(文本阴影、自动换行)


【零基础学习web前端】教程目录导航



文本阴影(text-shadow)
text-shadow: h-shadow  v-shadow  blur  color;
  • h-shadow    必写。水平阴影的位置,可以为负值。
  • v-shadow    必写。垂直阴影的位置,可以为负值。
  • blur             可选。模糊距离。
  • color           可选。阴影颜色。
[CSS] 纯文本查看 复制代码
h1{
    text-shadow: 5px 5px 5px black;
}


[HTML] 纯文本查看 复制代码
<h1>苏飞论坛</h1>

效果
5.png

自动换行(word-wrap)
word-wrap 属性允许长单词或 URL 地址换行到下一行。
word-wrap :normal           只在允许的断字点换行(浏览器保持默认处理)
word-wrap :break-word    在长单词或 URL 地址内部进行换行。
[CSS] 纯文本查看 复制代码
div{
    width: 20em;
    border: 1px  solid  red;
    word-wrap: break-word;
}

[HTML] 纯文本查看 复制代码
<div>
        双十二促销【终身VIP】【全年最低价】:一次开通永久免费下载所有源码 绝对的全年最低价格。不会存在比这个价格更低的优惠活动了。 参与活动单击这里 [url]http://www.sufeinetsufeisufeisufeisufeisufeisufeisufeisufeisufeisufeiu[/url]
    </div>

效果:
5.png
如果是
[CSS] 纯文本查看 复制代码
word-wrap: normal;

效果:
6.png


1. 开通SVIP会员,免费下载本站所有源码,不限次数据,不限时间
2. 加官方QQ群,加官方微信群获取更多资源和帮助
3. 找站长苏飞做网站、商城、CRM、小程序、App、爬虫相关、项目外包等点这里
发表于 2018-12-7 16:54:04 | 显示全部楼层
广告融入的不错,无处不在的感觉
发表于 2018-12-7 17:24:10 | 显示全部楼层
强烈支持楼主ing……
发表于 2018-12-7 18:30:21 | 显示全部楼层
支持楼主
回复

使用道具 举报

发表于 2018-12-8 17:40:52 | 显示全部楼层
好的后台 一定要了解前端
发表于 2018-12-8 18:21:38 | 显示全部楼层
我只是路过打酱油的。
您需要登录后才可以回帖 登录 | 马上注册

本版积分规则

QQ|手机版|小黑屋|手机版|联系我们|关于我们|广告合作|苏飞论坛 ( 豫ICP备18043678号-2)

GMT+8, 2024-11-8 19:34

© 2014-2021

快速回复 返回顶部 返回列表