html边框背景图片,css3 边框、背景、文本效果的实现代码
一、边框
box-shadow
box-shadow: h-shadow v-shadow blur spread color inset(ontset);
//h-shadow:水平阴影 v-shadow:垂直阴影 blur:模糊距离 spread:阴影的尺寸 color:阴影的颜色 inset(outset):内部阴影/外部阴影
box-shadow: 5px 0 5px 0 #000 outset;//
效果图如下
border-radius 圆角
border-radius: 1-4 length|% / 1-4 length|%;
//第一个参数:水平半径 第二个参数:垂直半径
border-radius: 50%/20%;//效果图如下
通过设置不同的边框圆角可以实现多种多样的边框盒子
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;//效果图如下
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边框背景图片,css3 边框、背景、文本效果的实现代码相关推荐
- android取消背景图片,android 设置背景图片
>**无背景的代码稍显枯燥啊少年: vs2015,vs2019等 再拓展里下载:** ! import java.awt.FlowLayout; import javax.swing.Image ...
- 背景属性:背景颜色、背景图片、背景图片平铺方式、背景图片定位、背景属性复合写法
背景属性 1.背景颜色 背景颜色应用于:内容区内间距区边框区 颜色表现方式:颜色英语单词16进制代码 #rgb(0,0,0) 0-255 .box {width: 200px;height: ...
- css怎么分开背景图片,css切背景图片(background-position)
给元素添加背景图片的方式有很多,个人总结的有: 用img插入图片: css3的方式手动绘图: 单独用background-image单独插入图片: 其中用background-image有两种方法,一 ...
- CSS的背景(背景颜色,背景图片,背景平铺,背景图片位置,背景图片固定(图片附着),背景复合写法)
CSS的背景 通过 CSS 背景属性,可以给页面元素添加背景样式. 背景属性可以设置背景颜色.背景图片.背景平铺.背景图片位置.背景图像固定等. 背景颜色 background-color 定义元素的 ...
- 黑马程序员前端-CSS背景:颜色、图片、平铺、背景图片位置、背景图像
前端学习笔记教程不定期更新中,传送门: 前端HTML第一天:什么是网页?什么是HTML?网页怎么形成? 黑马程序员前端-CSS入门总结 黑马程序员前端-CSS之emmet语法 黑马程序员前端-CSS的 ...
- html背景图片横屏,CSS背景颜色 背景图片 居中 重复 固定样式background经验篇
我们使用CSS Background样式属性,可以设置网页背景单一颜色.网页背景为图片.网页背景图片居中于网页.网页背景图片网页固定位置.网页背景图片中网页中重复平铺等css背景样式介绍与案例讲解. ...
- 背景图片固定(背景图片附着)(HTML、CSS)
背景图片固定(背景图片附着)(HTML.CSS) <!DOCTYPE html> <html lang="en"><head><meta ...
- 怎么修改计算机密码界面的背景,怎么修改Win7登录界面背景图片(欢迎界面背景图片)?...
怎么修改Win7登录界面背景图片(欢迎界面背景图片)?之前自己曾设置过,当时没有想到分享给朋友们!现在把这个帖子补上,先来看下效果图片,笔者将其换成了苹果Mac的登陆界面!只要您能从中获得乐趣,其实这 ...
- css背景图片加上半透明背景颜色
背景图片加上半透明背景颜色 background: rgba(0, 0, 0, .6) url(../../images/pro-bg.png) no-repeat center center; 转载 ...
最新文章
- list redis 怎样做排行_学 Redis 的 7000 字小结!!!
- Web安全学习笔记之HTTP协议
- 使用IDEA创建一个Servlet应用程序
- [转]SQL Server 2000执行计划成本(1/5)
- 从cpp向qml文件传中文字符串的方法
- 参赛方案-主机托管、中小企业虚拟化应用
- 如何配置openjdk的 java home
- java读流方式,下载网络上的图片
- POJ1062昂贵的聘礼(经典) 枚举区间 +【Dijkstra】
- The type List is not generic; it cannot …
- Android开发技术周报 Issue#9
- C 标准库—— stdlib.h(包括 rand srand 的实现)
- latex编译错误尝试生产pdf
- 什么是微信WXID数据?
- 字体变体font-variation-*
- 设置jupyter notebook文件保存位置
- 运行数据区③---方法区
- 计算机图形学原理及实践学习笔记第一章
- 【洛谷P1605 迷宫】
- javaScript:语法和使用