html 文字加边框 阴影效果,CSS3之边框圆角、边框阴影和字体阴影
1.边框圆角在早期如果想要制作四周有圆角的元素时,需要专门制作一张图片(这其实没什么),但是试想一下,如果要修改圆角的各种关系,比如颜色,半径等等,必须去重新修改图片才能够实现(十分麻烦).
在html5中针对这个效果专门推出了一个属性border-radius
w3c_CSS3边框讲解页面
使用方法:属性名:border-radius
赋值方法:赋值的方法类似于marginbackground-color: rebeccapurple; border-radius:20px; /*设置四周的圆角*/
设置四周的圆角.pngbackground-color: aqua;
border-radius: 50px 10px; /*上左下右,上右下左 */
上左下右,上右下左.pngbackground-color: seagreen;
border-radius: 50px 30px 10px; /*上左,上右下左,下右*/
上左,上右下左,下右.pngbackground-color: chartreuse;
border-radius: 50px 40px 30px 20px; /*上左,上右,下右,下左*/
上左,上右,下右,下左.pngbackground-color: magenta;
border-radius: 50px/100px; /*上下的圆角/左右的圆角*/
上下的圆角/左右的圆角.pngbackground-color: palevioletred;
border-top-left-radius: 40px; /*上左*/
border-top-right-radius: 10px; /*上右*/
border-bottom-left-radius: 20px; /*下左*/
border-bottom-right-radius: 50px; /*下右*/
上左,下右,上右,下左.png
小结:该属性的用法十分简单,只要搞清楚四边的对应关系,就能够制作各种精美组合效果
边框阴影除了可以为元素的四周设置倒圆角以外,CSS3还为我们提供了阴影的功能,能够制作更为精美的外观
w3c_CSS3边框讲解页面
使用方法属性名:box-shadow
可选值:h-shadow:必需。水平阴影的位置。允许负值。
v-shadow:必需。垂直阴影的位置。允许负值。
blur:可选。模糊距离。
spread:可选。阴影的尺寸
color:可选。阴影的颜色。请参阅 CSS 颜色值。
inset:可选。将外部阴影 (outset) 改为内部阴影。
示例代码这里青色的为li标签box-shadow:-10px 20px red;
shaw1.pngbox-shadow: 5px 5px 20px pink; /*x偏移值,y偏移值,影子四周模糊程度,影子颜色*/
shaw2.pngbox-shadow: 5px 5px 0px 5px red; /*x偏移值,y偏移值,影子四周模糊程度,影子额外的长度,影子颜色*/
/*影子默认跟元素一样大*/
shaw3.pngbox-shadow: inset 0px 0px 100px yellow; /*添加了inset以后,影子会往内部伸展,其他的都是一样的*/
shaw4.pngbox-shadow: 5px 5px yellow,-5px -5px blue,10px 10px green; /*多个影子的添加 只需要使用逗号分隔即可 */
shaw5.png注意:这里演示的只是基本用法,实际开发中配合更高的审美观,能够制作更为精美的页面
字体阴影这个属性的使用十分类似box-shadow
基本使用属性名: text-shadow
赋值方法_3个值:5px 5px red
x偏移值,y偏移值,阴影颜色
字体阴影.png赋值方法_4个值:5px 5px 10px pink
x偏移值,y偏移值,阴影模糊程度,阴影颜色
字体阴影_模糊.png赋值方法_多个阴影5px 5px red,10px 10px yellow;
通过逗号的来分隔不同的阴影
字体阴影_多个阴影.png
Demo(凹凸文字)首先让我们来看看字体的具体外观
凹凸字体实例.png凹字体:参照上图,当阳光从左上角照射时,字体是凹进去时,内部的轮廓线会被照射为白色
凸字体:参照上图,当阳光从左上角照射时,字体是凸起时,右上角的轮廓线会被照射为白色分析:阳光照射的轮廓线在上或者是在下就可以让我们产生这是凹,凸字体的错觉
具体代码:html>
Title
body{ background-color:gray;
} a{ /*字体阴影*/
/*x偏移值 y偏移值 (阴影的面积不能给负值) 字体颜色 多个之间使用逗号分隔*/
text-decoration: none; font:bolder 3em "微软雅黑"; color: gray;
} .ao{ text-shadow: 1px 1px #fff,-1px -1px #000;
} .tu{ text-shadow: 1px 1px #000,-1px -1px #fff;
}
点击去看魔兽世界大电影_凹下点击去看魔兽世界大电影_凸起
作者:Rella7
链接:https://www.jianshu.com/p/27b145730e94
html 文字加边框 阴影效果,CSS3之边框圆角、边框阴影和字体阴影相关推荐
- html5用css做样式边框,纯CSS3实现自定义Tooltip边框 涂鸦风格
本文作者html5tricks,转载请注明出处 这是一款用纯CSS3打造的自定义Tooltip边框的应用,之前我们讨论过如何用CSS3来实现不同样式的Tooltip,今天的这款Tooltip却可以用C ...
- CSS3中的圆角边框属性详解(border-radius属性)
实例 向 div 元素添加圆角边框: div { border:2px solid; border-radius:25px; } 页面底部有更多实例. 浏览器支持 IE Firefox Chrome ...
- 3 photolemur 样式_css3怎么给文字加描边?css3实现字体描边样式的方法(代码详解)...
css3怎么给文字加描边?本篇文章就给大家介绍css3给文字加描边的方法,让大家了解css text-stroke属性实现字体描边样式的具体方法.有一定的参考价值,有需要的朋友可以参考一下,希望对你们 ...
- css3:border-radius圆角边框详解 (变圆 图片)
转:http://www.kuqin.com/shuoit/20141014/342620.html border-radius:50% 今天来聊聊这个border-radius属性,radius的英 ...
- 学习整理Fabric.js 实现文本文字加粗、下划线、斜体、竖排、字体对齐代码
原图 效果图 代码 index.html <!DOCTYPE HTML> <html> <head><meta charset="utf-8&quo ...
- html圆角边框背景颜色,CSS之圆角边框渐变的实现
注:测试浏览器版本号--chrome 75.0.3770.80:opera 60.0.3255.109:firefox 67.0:ie 11. 对于普通的边框渐变,其作用于圆角边框渐变时会覆盖掉圆角的 ...
- android 微信设置圆角边框代码,Android编程实现圆角边框的方法
本文实例讲述了Android编程实现圆角边框的方法.分享给大家供大家参考,具体如下: 设置边框圆角可以在drawable-mdpi目录里定义一个xml: android:topRightRadius= ...
- python怎么字体加阴影_ppt字体阴影怎么设置?ppt如何制作字体阴影?
首先新建一个空白PPT,单击"工具栏"上"插入"命令,选择"文本框",在下拉菜单中点击"横排文本框".然后用鼠标在空白区 ...
- html中加好看的边框,html – CSS3中的嵌入边框很好
我真的很喜欢我最近在管子上看到的这种边界风格: 我对他们如何创造这种效果特别感兴趣,似乎底部边框突出显示而顶部变暗.我知道我在Photoshop中如何做到这一点,但他们如何在CSS中做到这一点? co ...
最新文章
- 搞定“另一个 OleDbParameterCollection 中已包含 OleDbParameter。”的两种办法。
- Linux添加环境变量
- 客户端产生CLOSE WAIT状态的解决方案
- 前端趋势榜:上周最 yyds 的 10 大前端项目 - 211101
- 字符串分割 函数实现
- nsstring 空值比较_用比较器的nulls排序具有空值的列表
- 白盒测试-条件覆盖-短路陷阱
- html文字和下划线怎么分开,HTML css样式怎样才能像下图那样把文字分开,还有下划线,请帮我补写下 ,谢谢!!...
- jQuery的立即调用表达式
- oracle中trim,ltrim,rtrim函数用法
- pads layout 无法将dxf文件导入进来的2D Line转换成Board Outline
- ToStringBuilder使用
- cpufreq 频率设置verify
- swagger2 注解
- 【原创】WP7向Win8移植遇到的问题及独创性解决方案
- 关于.net的一则笑话(无奈一笑)
- python制作相册_《自拍教程73》Python 自动生成相册文件夹
- (转载)(官方)UE4--图像编程----着色器开发----HLSL 交叉编译器
- 求图形的周长和面积java_抽象类求图形周长和面积
- 58同城android客户端手机号码解密方法
热门文章
- Web前端:面向程序员的五大前端技术
- HTML之head标签里面的一些内容
- 两年经验斩获蚂蚁、头条、PingCAP Offer,太帅了
- 假设成年人的体重和身高存在此种关系: 身高(厘米)-100=标准体重(千克) 如果一个人的体重与其标准体重的差值在正负5%之间,显示“体重正常”,其他则显示“体重超标”。编写程序,能处理用户输入的
- C语言占位符及各种变量占用字节数
- iphone Simulator 路径
- CCGNet用于发现共晶材料中的coformer
- python使用splinter报错
- 程序员接私活月入2万?分享10个接私活的网站快收藏~
- errmsg:invalid message type hint 群发图文消息