css3 边框、背景、文本效果的实现代码


Posted in HTML / CSS onMarch 21, 2018

一、边框

box-shadow

box-shadow: h-shadow v-shadow blur spread color inset(ontset);
//h-shadow:水平阴影 v-shadow:垂直阴影 blur:模糊距离 spread:阴影的尺寸 color:阴影的颜色 inset(outset):内部阴影/外部阴影 <br>box-shadow: 5px 0 5px 0 #000 outset;//

效果图如下

css3 边框、背景、文本效果的实现代码

border-radius 圆角

border-radius: 1-4 length|% / 1-4 length|%;
//第一个参数:水平半径 第二个参数:垂直半径
border-radius: 50%/20%;//效果图如下

通过设置不同的边框圆角可以实现多种多样的边框盒子
 

css3 边框、背景、文本效果的实现代码

border-image

border-image: border-image-source border-image-slice border-image-width border-image-outset border-image-repeat
//边框图片url边框内偏移 边框宽度 边框图像区域超出边框的量 边框平铺(repeated)、铺满(rounded)、拉伸(stretched)

二、背景

background-size 规定背景图片尺寸
 

background-size: length|percentage|cover|contain;
//length:设置背景图片宽度和高度 percentage:根据父元素百分比设置背景图片宽度和高度 cover:背景图像扩展至足够大以使背景图像完全覆盖背景区域 contain:把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。

background-clip 规定背景的“绘制”区域

background-clip: border-box|padding-box|content-box;
background-origin 规定背景图片的“定位”区域
background-origin: padding-box|border-box|content-box;

PS:注意background-origin与background-clip的区别,一个是定位区域,一个是绘制区域

三、文本效果

text-shadow 文本阴影效果

text-shadow: h-shadow v-shadow blur color;
//h-shadow:水平阴影 v-shadow:垂直阴影 blur:模糊距离 color:阴影颜色
text-shadow: 5px 5px 3px #000;//效果图如下

css3 边框、背景、文本效果的实现代码

word-wrap 允许对长的不可分割的单词进行分割并换行到下一行

word-wrap: normal|break-word;
//normal:只在允许的断字点换行 break-word:在长单词或url地址内部换行

word-break 规定非中日韩文本的换行规则

word-break: normal|break-all|keep-all;
// normal:使用浏览器默认换行规则  break-all:允许在单词内换行 keep-all:只能在半角空格或连字符处换行

总结

以上所述是小编给大家介绍的css3 边框、背景、文本效果的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
纯CSS3实现手风琴风格菜单具体步骤
May 06 HTML / CSS
CSS3中的@keyframes关键帧动画的选择器绑定
Jun 13 HTML / CSS
css3实现冲击波效果的示例代码
Jan 11 HTML / CSS
CSS3动画和HTML5新特性详解
Aug 31 HTML / CSS
HTML5中div、article、section的区别及使用介绍
Aug 14 HTML / CSS
极简的HTML5模版
Jul 09 HTML / CSS
教你使用Canvas处理图片的方法
Nov 28 HTML / CSS
Canvas 像素处理之改变透明度的实现代码
Jan 08 HTML / CSS
一文彻底解决HTML5页面中长按保存图片功能
Jun 10 HTML / CSS
HTML5 3D旋转相册的实现示例
Dec 03 HTML / CSS
video下autoplay属性无效的解决方法(添加muted属性)
May 19 HTML / CSS
AmazeUI 折叠面板的实现代码
Aug 17 HTML / CSS
利用CSS3 动画 绘画 圆形动态时钟
Mar 20 #HTML / CSS
css3 矩阵的使用详解
Mar 20 #HTML / CSS
CSS3 :default伪类选择器使用简介
Mar 15 #HTML / CSS
css3编写浏览器背景渐变背景色的方法
Mar 05 #HTML / CSS
CSS3下的渐变文字效果实现示例
Mar 02 #HTML / CSS
CSS3 @keyframes简单动画实现
Feb 24 #HTML / CSS
css3 实现圆形旋转倒计时
Feb 24 #HTML / CSS
You might like
php 数组的合并、拆分、区别取值函数集
2010/02/15 PHP
解密ThinkPHP3.1.2版本之模块和操作映射
2014/06/19 PHP
功能强大的php分页函数
2016/07/20 PHP
下载站控制介绍字数显示的脚本 显示全部 隐藏介绍等功能
2009/09/19 Javascript
javaScript parseInt字符转化为数字函数使用小结
2009/11/05 Javascript
jQuery ready函数滥用分析
2011/02/16 Javascript
Js 冒泡事件阻止实现代码
2013/01/27 Javascript
javascript引用赋值(地址传值)用法实例
2015/01/13 Javascript
js+CSS实现弹出居中背景半透明div层的方法
2015/02/26 Javascript
jQuery中$this和$(this)的区别介绍(一看就懂)
2015/07/06 Javascript
Vue关于数据绑定出错解决办法
2017/05/15 Javascript
angular2中Http请求原理与用法详解
2018/01/11 Javascript
微信小程序导航栏滑动定位功能示例(实现CSS3的positionsticky效果)
2019/01/24 Javascript
JS div匀速移动动画与变速移动动画代码实例
2019/03/26 Javascript
微信小程序之几种常见的弹框提示信息实现详解
2019/07/11 Javascript
[03:03]DOTA2校园争霸赛 济南城市决赛欢乐发奖活动
2013/10/21 DOTA
python中__slots__用法实例
2015/06/04 Python
Python标准模块--ContextManager上下文管理器的具体用法
2017/11/27 Python
浅谈python numpy中nonzero()的用法
2018/04/02 Python
PyQT5 QTableView显示绑定数据的实例详解
2019/06/25 Python
Python利用matplotlib绘制约数个数统计图示例
2019/11/26 Python
python 视频逐帧保存为图片的完整实例
2019/12/10 Python
python numpy 矩阵堆叠实例
2020/01/17 Python
Selenium python时间控件输入问题解决方案
2020/07/22 Python
django中ImageField的使用详解
2020/12/21 Python
Under Armour瑞典官方网站:美国高端运动科技品牌
2018/11/21 全球购物
俄罗斯电子产品、计算机和家用电器购物网站:OLDI
2019/10/27 全球购物
Java的接口和C++的虚类的相同和不同处
2014/03/27 面试题
幼师自我鉴定
2014/02/01 职场文书
可贵的沉默教学反思
2014/02/06 职场文书
医生辞职信范文
2015/03/02 职场文书
干货干货!2019最新优秀创业计划书
2019/03/21 职场文书
nginx proxy_cache 缓存配置详解
2021/03/31 Servers
python 遍历磁盘目录的三种方法
2021/04/02 Python
在前女友婚礼上,用Python破解了现场的WIFI还把名称改成了
2021/05/28 Python
MySQL聚簇索引和非聚簇索引的区别详情
2022/06/14 MySQL