实现效果如图：

代码如下：

 .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. 【json】与【枚举】的序列化和反序列化

    参考:Jackson – Deserialization from json to Java enums 问题描述 java中使用枚举时,如果涉及到restful调用,不可避免会涉及到枚举的序列化和反 ...

  2. 【剑指Offer】只出现一次的字符

    题目描述 请实现一个函数用来找出字符流中第一个只出现一次的字符.例如,当从字符流中只读出前两个字符"go"时,第一个只出现一次的字符是"g".当从该字符流中读出 ...

  3. VirtualBox内Linux系统怎样与Windows共享文件夹

    Windows本机用虚拟机安装Linux系统(前提其他已配置好) 1. 双击无法安装,需要在扩展里添加:管理->全局设定->扩展 ->添加 或者 打开虚拟机进入Ubuntu系统,首先 ...

  4. ajaxFileUpload 文件上传

    源码: jQuery .extend({ createUploadIframe : function(id, uri) {//id为当前系统时间字符串,uri是外部传入的json对象的一个参数 //c ...

  5. Python 目录整理

    基础部分: 1  常量  2 字符编码  字符编码补充 3 编码集 4 break与continue 5装饰器 6 迭代器 7生成器 8面向过程 9模块 10包 11 递归调用 12文件的用途 13类 ...

  6. 7.10 break.c 程序

    7.10 break.c 程序 #include <stdio.h> int main(void) { float length, width; printf("Enter th ...

  7. ES timeout 的一些笔记

    首先解释下Timeout的作用: 比如,一个search,可能要10分钟才能搜完,那么,es就会等10分钟,直到结果出来.然而,在某些场景下,客户是等不了10分钟的.比如,淘宝搜东西的时候,客户宁可等 ...

  8. LeetCode 791. Custom Sort String

    题目链接:https://leetcode.com/problems/custom-sort-string/description/ S and T are strings composed of l ...

  9. To be taught if i am fortunate

    此博客算是我自娱自乐的海洋球池吧. 由于我十分的菜并且文笔拙劣,所以您可能并不能在这找到什么有用的信息或者好玩的东西(或者exciting的内容). 如果您能指出我的一些错误,我将十分感激.

  10. 记一次深度系统安装至windows系统盘提示挂载为只读模式问题

    记一次深度系统安装至windows系统盘提示挂载为只读模式问题 来到新公司新电脑自己要安装deepin,安装的时候没考虑双系统直接装至默认win系统盘,导致deepin启动后提示如下: 提示多个挂载分 ...