• 技术文章 >web前端 >css教程

    css如何设置标题阴影边框

    奋力向前奋力向前2021-09-09 12:01:34原创213

    方法:1、利用border属性给标题元素添加边框,语法“border:宽度 样式 颜色;”;2、利用“text-align: center”实现标题文本居中;3、使用box-shadow属性给标题元素的边框添加阴影效果。

    本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

    css如何设置标题阴影边框?

    我们来讲一下css如何标题添加阴影边框。

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title></title> 
    <style> 
    div
    {
    	width:200px;
    	height:200px;
    	border:2px solid red;
    	text-align: center;
    	margin: 20px auto;
    	line-height: 200px;
    	box-shadow: red 10px 30px 5px;
    }
    
    </style>
    </head>
    <body>
    
    <div>php中文网</div> 
    
    </body>
    </html>

    代码效果

    微信截图_20210909110606.png

    css阴影边框使用语法:

    属性:box-shadow

    使用方法:div{box-shadow: 001px #000inset;}

    阴影使用方法分析:第一个零代表距离对象左边距离为0,并且开始显示阴影,第二个零表示距离对象上间距对象为0,就开始显示阴影,1px表示阴影的范围1px#000代表着阴影的颜色,inset表示对象内阴影,对象外就不设置阴影。

    兼容问题:火狐浏览器3.5版本和谷歌都是可以支持box-shadow属性。

    推荐学习:CSS视频教程

    以上就是css如何设置标题阴影边框的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:css html
    上一篇:css怎么给文字加背景 下一篇:让网站更酷炫的CSS filter使用小技巧,值得收藏!
    线上培训班

    相关文章推荐

    • 手把手教你使用css3制作炫酷的导航栏效果(代码详解)• 一步一步教你使用CSS制作文字实现逐帧动画(附代码)• 一招教你使用css3制作按钮添加动态效果(代码分享)• css怎样设置页面居中• css怎么给文字加背景

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网