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 相关文章推荐
50个强大璀璨的CSS3/JS技术运用实例
Feb 27 HTML / CSS
css3一款3D字体带阴影效果的实现步骤
Mar 20 HTML / CSS
纯HTML+CSS3制作导航菜单(附源码)
Apr 24 HTML / CSS
css3中background新增的4个新的相关属性用法介绍
Sep 26 HTML / CSS
几个CSS3的flex弹性盒模型布局的简单例子演示
May 12 HTML / CSS
html5文本内容_动力节点Java学院整理
Jul 11 HTML / CSS
HTML5新增元素如何兼容旧浏览器有哪些方法
May 09 HTML / CSS
记一次高分屏下canvas模糊问题
Feb 17 HTML / CSS
HTML利用九宫格原理进行网页布局
Mar 13 HTML / CSS
html5实现输入框fixed定位在屏幕最底部兼容性
Jul 03 HTML / CSS
app内嵌H5 webview 本地缓存问题的解决
Oct 19 HTML / CSS
CSS3 制作的彩虹按钮样式
Apr 11 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语法速查表
2007/01/02 PHP
phpMyAdmin 安装教程全攻略
2007/03/19 PHP
在WordPress中实现评论头像的自定义默认和延迟加载
2015/11/24 PHP
100行PHP代码实现socks5代理服务器
2016/04/28 PHP
Laravel5.1 框架Request请求操作常见用法实例分析
2020/01/04 PHP
PHP vsprintf()函数格式化字符串操作原理解析
2020/07/14 PHP
JQuery跨Iframe选择实现代码
2010/08/19 Javascript
关于JS判断图片是否加载完成且获取图片宽度的方法
2013/04/09 Javascript
教你如何在 Javascript 文件里使用 .Net MVC Razor 语法
2014/07/23 Javascript
js流动式效果显示当前系统时间
2016/05/16 Javascript
深入理解JS中的Function.prototype.bind()方法
2016/10/11 Javascript
[原创]JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】
2016/11/01 Javascript
Bootstrap popover用法详解
2016/12/22 Javascript
详解vue2.0 transition 多个元素嵌套使用过渡
2017/06/19 Javascript
js定时器实现倒计时效果
2017/11/05 Javascript
jQuery Datatables表头不对齐的解决办法
2017/11/27 jQuery
微信小程序实现滚动消息通知
2018/02/02 Javascript
深入浅析Vue.js中 computed和methods不同机制
2018/03/22 Javascript
通过jquery toggleClass()属性制作文章段落更改背景颜色
2018/05/21 jQuery
vue element-ui实现input输入框金额数字添加千分位
2019/12/29 Javascript
javascript实现左右缓动动画函数
2020/11/25 Javascript
[41:56]Spirit vs Liquid Supermajor小组赛A组 BO3 第一场 6.2
2018/06/03 DOTA
[39:21]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.24
2019/09/10 DOTA
浅述python2与python3的简单区别
2018/09/19 Python
python-numpy-指数分布实例详解
2019/12/07 Python
Python读取Excel一列并计算所有对象出现次数的方法
2020/09/04 Python
针对HTML5的Web Worker使用攻略
2015/07/12 HTML / CSS
HTML5 canvas基本绘图之文字渲染
2016/06/27 HTML / CSS
remote接口和home接口主要作用
2013/05/15 面试题
卖车协议书范文
2016/03/23 职场文书
关于保护环境的建议书
2019/06/24 职场文书
python tkinter实现定时关机
2021/04/21 Python
MySQL InnoDB ReplicaSet(副本集)简单介绍
2021/04/24 MySQL
Windows11里微软已经将驱动程序安装位置A盘删除
2021/11/21 数码科技
JavaScript阻止事件冒泡的方法
2021/12/06 Javascript
Linux在两个服务器直接传文件的操作方法
2022/08/05 Servers