css怎么加投影

css怎么加投影

1.jpg

制作类似的效果时可以直接用CSS的阴影制作,代码如下:

background: rgba(56,111,207,0.3);
box-shadow: 0px 0px 10px #386FCF inset;
border: 1px solid rgba(0,168,236,1);
width:100px;
height:100px

可以直接复制,运行DEMO:

(推荐学习:CSS视频教程

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    
    <head>
        <title>login test</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style type="text/css">
</style>
    </head>
    
    <body>
        <div class="box"></div>
    </body>

</html>

CSS3定义了两种阴影:盒子阴影和文本阴影。其中盒子阴影需要IE9及其更新版本,而文本阴影需要IE10及其更新版本。下面分别介绍box-shadow阴影的使用:

box-shadow属性向box添加一个或多个阴影。

box-shadow: offset-x offset-y blur spread color inset; blur:模糊 spread:伸展 inset:内凹

ox-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展] [阴影颜色] [投影方式];

更多CSS相关技术文章,请访问CSS3答疑栏目进行学习!

以上就是css怎么加投影的详细内容,更多请关注html中文网其它相关文章!

赞(0) 打赏
未经允许不得转载:html中文网首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏