实现效果如图：

代码如下：

 .section {

     margin: 20upx 30upx;

     padding: 40upx;

     border-radius: 6px;

     border-top: #0670C4 solid 6px;

     /* 主要是下面两行 */

     background-color: #FFFFFF;

     box-shadow: #808080 0px 0px 10px;

 }

一个box四周边框阴影的更多相关文章

  1. CSS3 02. 边框、边框圆角、边框阴影、边框图片、渐变、线性渐变、径向渐变、背景、过渡transition、2D转换

    边框圆角 border-radius 每个角可以设置两个值,x值.y值 border-top-left-radius:水平半径 垂直半径 border-radius:水平半径/垂直半径 border- ...

  2. “妄”眼欲穿-CSS之flex布局和边框阴影

    妄:狂妄: 不会的东西只有怀着一颗狂妄的心,假装能把它看穿吧. 作为一个什么都不会的小白,为了学习(zb),特别在拿来主义之后写一些对于某些css布局的总结,进一步加深对知识的记忆.知识是人类的共同财 ...

  3. CSS3(1)---圆角边框、边框阴影

    CSS3(1)---圆角边框.边框阴影 CSS3可以简单理解成是CSS的增强版,它的优点在于不仅有利于开发与维护,还能提高网站的性能. 一.圆角边框 圆角在实际开放过程中,还是蛮常见的.以前基本是通过 ...

  4. flex布局和边框阴影

    "妄"眼欲穿-CSS之flex布局和边框阴影 妄:狂妄: 不会的东西只有怀着一颗狂妄的心,假装能把它看穿吧. flex布局 main axis:主轴:cross axis:交叉轴 ...

  5. CSS之flex布局和边框阴影

    flex布局 main axis:主轴:cross axis:交叉轴 容器的子元素自动成为容器成员,成为flex 项目(item) flex容器属性 flex-direction ​ 该属性决定主轴的 ...

  6. css边框阴影

    <style type="text/css">.mydiv{width:250px;height:auto;border:#909090 1px solid;backg ...

  7. css3圆角边框，边框阴影

    border-radius向元素添加圆角边框,css3中的.IE9+ chrome safari5+ firefox4+ 现在都支持.可以向input div等设置边框.与border相似,可以四个角 ...

  8. Html/CSS前端如何实现文字边框阴影

    上次我们聊了<Html5前端如何实现文字阴影>,其实在开发中现在对于阴影效果的使用已经越来越广泛了,那么今天我们就来说一说用同样的手法实现边框阴影. 一.边框阴影box-shadow 边框 ...

  9. 从零开始学 Web 之 CSS3（二）颜色模式，文字阴影，盒模型，边框圆角，边框阴影

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

随机推荐

  1. 二、初步认识springBoot的pom.xml

    1.  大体结构 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www. ...

  2. maven私库nexus2.3.0-04迁移升级到nexus-3.16.1-02（异机迁移备份）

    环境信息: nexus2.3.0-04安装在32位Windows server 2003系统上 安装位置信息如下: 仓库迁移 Nexus的构件仓库都保存在sonatype-work目录中,nexus2 ...

  3. Python抓取百度汉字笔画的gif

    偶然发现百度汉语里面,有一笔一划的汉字顺序:          觉得这个动态的图片,等以后娃长大了,可以用这个教写字.然后就去找找常用汉字,现代汉语常用字表 .拿到这里面的汉字,做两个数组出来,一共是 ...

  4. Oracle中rownum的基本用法

    Oracle中rownum的基本用法 对于rownum来说它是oracle系统顺序分配为从查询返回的行的编号,返回的第一行分配的是1,第二行是2,依此类推,这个伪字段可以用于限制查询返回的总行数,且r ...

  5. Nginx 流量和连接数限制

    1.Nginx流量限制 实现流量限制由两个指令 limit_rate 和 limit_rate_after 共同完成: limit_rate 语法:limit_rate rate; 默认值:limit ...

  6. WPF设计界面不执行代码

    一般在我们在设计WPF XAML界面时,XAML 引用一些后端的类.比如UserControl.Converter.MVVM,引用 xmlns:ALLUserControl="clr-nam ...

  7. Linux常见企业面试题

    1:只查看test.txt (100行)文件中第20行到30行的数据(企业常见面试题) 答: seq (序列) 第一种方法:head -30 test1.txt | tail -11 第二种方法:se ...

  8. MySQL binlog2sql-闪回数据

    binlog2sql 从MySQL binlog解析出你要的SQL.根据不同选项,你可以得到原始SQL.回滚SQL.去除主键的INSERT SQL等. 用途 数据快速回滚(闪回) 主从切换后新mast ...

  9. 反射 内省 BeanUtil 综合使用

    package com.zsphp.domain; public class User { private String userId; private String userName; privat ...

  10. java——什么是浅表副本

    ArrayList.clone(),hashtable.clone()方法返回此ArrayList的浅表副本(不复制这些元素本身),那么什么是浅表副本? 一个集合的浅度拷贝意味着只拷贝集合中的元素,不 ...