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动画之流彩文字效果+图片模糊效果+边框伸展效果实现代码合集
Aug 18 HTML / CSS
CSS3提交意见输入框样式代码
Oct 30 HTML / CSS
css3 中的新特性加强记忆详解
Apr 16 HTML / CSS
CSS3 实现雷达扫描图的示例代码
Sep 21 HTML / CSS
canvas绘制文本内容自动换行的实现代码
Jan 14 HTML / CSS
HTML5的结构和语义(1):前言
Oct 17 HTML / CSS
Html5 Geolocation获取地理位置信息实例
Dec 09 HTML / CSS
canvas仿写贝塞尔曲线的示例代码
Dec 29 HTML / CSS
canvas裁剪clip()函数的具体使用
Mar 01 HTML / CSS
简洁自适应404页面HTML好看的404源码
Dec 16 HTML / CSS
CSS实现漂亮的时钟动画效果的实例代码
Mar 30 HTML / CSS
CSS3中Animation实现简单的手指点击动画的示例
Jul 15 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采集类snoopy详细介绍(snoopy使用教程)
2014/06/19 PHP
php实现转换ubb代码的方法
2015/06/18 PHP
CI框架简单邮件发送类实例
2016/05/18 PHP
php微信公众平台配置接口开发程序
2016/09/22 PHP
PHP多维数组元素操作类的方法
2016/11/14 PHP
PHP实现找出链表中环的入口节点
2018/01/16 PHP
jQuery EasyUI中对表格进行编辑的实现代码
2010/06/10 Javascript
JS实现进入页面时渐变背景色的方法
2015/02/25 Javascript
jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载
2016/04/19 Javascript
jQuery实现点击后高亮背景固定显示的菜单效果【附demo源码下载】
2016/09/21 Javascript
BootStrap 可编辑表Table格
2016/11/24 Javascript
JavaScript中捕获与冒泡详解及实例
2017/02/03 Javascript
vue中如何动态绑定图片,vue中通过data返回图片路径的方法
2018/02/07 Javascript
Vue.set()实现数据动态响应的方法
2018/02/07 Javascript
nodejs acl的用户权限管理详解
2018/03/14 NodeJs
使用PYTHON接收多播数据的代码
2012/03/01 Python
通过python下载FTP上的文件夹的实现代码
2013/02/10 Python
详解Python如何获取列表(List)的中位数
2016/08/12 Python
读写json中文ASCII乱码问题的解决方法
2016/11/05 Python
Python基于生成器迭代实现的八皇后问题示例
2018/05/23 Python
Python使用Selenium模块实现模拟浏览器抓取淘宝商品美食信息功能示例
2018/07/18 Python
解决Mac下首次安装pycharm无project interpreter的问题
2018/10/29 Python
详解重置Django migration的常见方式
2019/02/15 Python
详解python 中in 的 用法
2019/12/12 Python
python Jupyter运行时间实例过程解析
2019/12/13 Python
Python求平面内点到直线距离的实现
2020/01/19 Python
python实现按键精灵找色点击功能教程,使用pywin32和Pillow库
2020/06/04 Python
python 常用日期处理-- datetime 模块的使用
2020/09/02 Python
Marks & Spencer爱尔兰:英国马莎百货
2016/04/20 全球购物
美国潜水装备、水肺潜水和浮潜设备商店:Leisure Pro
2018/08/08 全球购物
加拿大品牌鞋包连锁店:Little Burgundy
2021/02/28 全球购物
给同学的道歉信
2014/01/16 职场文书
志愿者宣传口号
2014/06/17 职场文书
社区两委对照检查材料
2014/08/23 职场文书
自我检讨书怎么写
2015/05/07 职场文书
HTML中实现音乐或视频自动播放案例详解
2022/05/30 HTML / CSS