DDR爱好者之家 Design By 杰米
一.边框阴影
box-shadow 边框阴影
参数: 参数1 x-shadow:设置对象的阴影水平偏移值,单位可以是px、em或百分比等,允许负值。参数2 y-shadow:设置对象的阴影垂直偏移值,单位可以是px、em或百分比等,允许负值。参数3 blur:用于设置边框阴影半径大小。参数4 spread:扩展半径,设置阴影的尺寸;这个参数可选,缺省时值为0。参数5 color:设置阴影的颜色。参数6 inset:这个参数默认不设置。默认情况下为外阴影,inset表示内阴影。
box-shadow:x-shadow y-shadow blur spread color inset;
二.实例
效果1
效果二
上图的效果我们怎样来实现呢?
HTML结构 CSS样式字体样式字体颜色边框阴影 那我们来看一下具体代码:
HTML:
<div class="box">box-shadow</div>
CSS:
.box{ width:300px; height:150px; background: deepskyblue; font:30px/150px 'Microsoft YaHei'; color: #fff; font-weight: bold; text-align: center; margin:100px auto; /*边框阴影*/ /*效果1*/ box-shadow: inset 5px 5px 20px #ccc; /*效果2*/ box-shadow: inset 5px 5px 20px pink,5px 5px 20px #000; }
总结
以上所述是小编给大家介绍的Html/CSS前端实现文字边框阴影效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
DDR爱好者之家 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
DDR爱好者之家 Design By 杰米
暂无评论...
更新日志
2024年05月29日
2024年05月29日
- 郑伊健1995-EARTH[香港][WAV+CUE]
- 梁汉文《不愿一个人》华星40金唱片[WAV分轨]
- 李宗盛《李宗盛精选滚石香港黄金十年》[WAV/分轨][670MB]
- 群星 模拟之声慢刻CD《发烧宝丽金35周年》[WAV+CUE][640MB]
- 《古惑仔系列电影合集1996-1998》[FLAC/分轨][780MB]
- 鸣潮自选4星武器推荐攻略 4星自选武器哪个最好
- 鸣潮自选5星武器怎么获取 五星自选武器哪个最好
- 鸣潮联觉等级怎么提升 联觉等级升级攻略
- 甄妮《皆因你的爱》华星40金唱片[WAV分轨]
- 陈奕迅《时代曲》华星40金唱片)[WAV分轨]
- 蔡依林《2004BornToBeAStar(超级珍藏世纪精选2CD)》[WAV整轨]
- 《碧海黑帆》新赛季预告公布 又有免费试玩生怕你不玩
- 刘德华《天王巨星经典情歌典藏2CD》[WAV+CUE][1.3GB]
- 斯琴格日乐《强烈直接的音乐方式 姿态》[WAV+CUE][500MB]
- 王菲《收录12首 只爱陌生人》[WAV+CUE][540MB]