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 相关文章推荐
CSS实现圆形放大镜狙击镜效果 只有圆圈里的放大
Dec 10 HTML / CSS
纯CSS3实现带动画效果导航菜单无需js
Sep 27 HTML / CSS
CSS图片翻转动画技术详解(IE也实现了)
Apr 03 HTML / CSS
CSS3新增布局之: flex详解
Jun 18 HTML / CSS
CSS3制作皮卡丘动画壁纸的示例
Nov 02 HTML / CSS
Html5新标签解释及用法
Feb 17 HTML / CSS
使用HTML5的Notification API制作web通知的教程
May 08 HTML / CSS
HTML5单页面手势滑屏切换原理
Mar 21 HTML / CSS
高清屏中使用Canvas绘图出现模糊的问题及解决方法
Jun 03 HTML / CSS
html5视频自动横过来自适应页面且点击播放功能的实现
Jun 03 HTML / CSS
纯CSS如何禁止用户复制网页的内容
Nov 01 HTML / CSS
分享CSS盒子模型隐藏的几种方式
Feb 28 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
mysql5详细安装教程
2007/01/15 PHP
php验证手机号码(支持归属地查询及编码为UTF8)
2013/02/01 PHP
PHP大批量插入数据库的3种方法和速度对比
2014/07/08 PHP
利用PHP获取汉字首字母并且分组排序详解
2017/10/22 PHP
thinkphp5.1 文件引入路径问题及注意事项
2018/06/13 PHP
JavaScript Sort 的一个错误用法示例
2015/03/20 Javascript
JS实现的简洁纵向滑动菜单(滑动门)效果
2015/10/19 Javascript
基于jquery实现轮播特效
2016/04/22 Javascript
JS实现页面数据无限加载
2016/09/13 Javascript
用jQuery的AJax实现异步访问、异步加载
2016/11/02 Javascript
详解angular ui-grid之过滤器设置
2017/06/07 Javascript
微信小程序使用modal组件弹出对话框功能示例
2017/11/29 Javascript
vue绑定的点击事件阻止冒泡的实例
2018/02/08 Javascript
AngularJS监听ng-repeat渲染完成的方法
2018/03/20 Javascript
Vue实现点击显示不同图片的效果
2019/08/10 Javascript
jQuery实现判断滚动条滚动到document底部的方法分析
2019/08/27 jQuery
LayUi使用switch开关,动态的去控制它是否被启用的方法
2019/09/21 Javascript
原生js实现拖拽移动与缩放效果
2020/08/24 Javascript
ant design vue中表格指定格式渲染方式
2020/10/28 Javascript
[00:30]塑造者的传承礼包-戴泽“暗影之焰”套装展示视频
2014/04/04 DOTA
python抓取网页中的图片示例
2014/02/28 Python
python使用requests模块实现爬取电影天堂最新电影信息
2019/04/03 Python
python实现远程控制电脑
2019/05/23 Python
python如何实现异步调用函数执行
2019/07/08 Python
django echarts饼图数据动态加载的实例
2019/08/12 Python
django 配置阿里云OSS存储media文件的例子
2019/08/20 Python
Python numpy线性代数用法实例解析
2019/11/15 Python
美国宠物商店:Wag.com
2016/10/25 全球购物
行政部主管岗位职责
2013/12/28 职场文书
简历中的自我评价范文
2014/02/05 职场文书
初中毕业生的自我评价
2014/03/03 职场文书
法律系毕业生自荐信范文
2014/03/27 职场文书
竞选大学学委演讲稿
2014/09/13 职场文书
运动会400米加油稿(8篇)
2014/09/22 职场文书
2014年共青团工作总结
2014/12/10 职场文书
OpenCV-Python直方图均衡化实现图像去雾
2021/06/07 Python