css美化Div边框的样式实例

 

很多时候如果不是用了很多样式，很难把边框修饰得好看，看了一篇博文，觉得真的挺漂亮，也挺好看。

转载的博文地址

将这段美化的css代码

border:1px solid #96c2f1;background:#eff7ff

应用到div中，

<div style="padding:8px;border:1px solid #96c2f1;background:#eff7ff">&nbsp;border:1px solid #96c2f1;background:#eff7ff</div>

效果如下。

 border:1px solid #96c2f1;background:#eff7ff

以下还有十个示例。

 border:1px solid #9bdf70;background:#f0fbeb
 border:1px solid #bbe1f1;background:#eefaff
 border:1px solid #cceff5;background:#fafcfd
 border:1px solid #ffcc00;background:#fffff7
 border:1px solid #cee3e9;background:#f1f7f9
 border:1px solid #a9c9e2;background:#e8f5fe
 border:1px solid #e3e197;background:#ffffdd
 border:1px solid #adcd3c;background:#f2fddb
 border:1px solid #bfd1eb;background:#f3faff
 border:1px solid #a5b6c8;background:#eef3f7

不是说多么复杂，而是配色的确好看，嘻嘻。

贵有恒何必三更眠五更起，最无益只怕一日曝十日寒。

css美化Div边框的样式实例*（转载）的更多相关文章

  1. css美化Div边框的样式实例

    很多时候如果不是用了很多样式,很难把边框修饰得好看,看了一篇博文,觉得真的挺漂亮,也挺好看. 转载的博文地址 将这段美化的css代码 border:1px solid #96c2f1;backgrou ...

  2. CSS设置DIV边框为圆角，添加背景色溢出的问题

    这么几天需要做一个类似于层级展示的东西,最后一层需要做一些div框来展示数据,我用css设置了div的边框为圆角,但是添加背景色的时候颜色溢出,覆盖了四个角的圆弧,效果如图所示: css代码如下: . ...

  3. css 给div 添加滚动条样式hover 效果

             css .nui-scroll { margin-left: 100px; border: 1px solid #000; width: 200px; height: 100px; ...

  4. css实现div内凹角样式

    平常的开发中我们一般使用到圆角都是外凸的,即border-radius属性.而如果有内凹角的情况,我们一般的考虑实现方法有2种.一种是直接使用背景图片,一种是使用css. 用到的属性则是backgro ...

  5. 美化Div的边框

    CSS修饰Div边框 大部分时候,Div的边框真的做的太丑了,如果不用很多样式来修饰的话,它永远都是那么的突兀.作为一个后端开发,前端菜鸡,在没有设计和前端开发自己独自做项目的时候常常会遇到Div边框 ...

  6. CSS样式实现溢出超出DIV边框宽度高度的内容自动隐藏方法

    CSS样式实现溢出超出DIV边框宽度高度的内容自动隐藏方法 平时我们布局时候,有的文字内容多了会超过溢出我们限制的高度,有的图片会撑破DIV,让网页错位变乱. 这样我们就需要解决如何使用CSS来超出设 ...

  7. 如何给div加一个边框border样式

    如何给div加一个边框样式? 对div盒子加一个边框样式很简单只需要使用border板块样式即可. 一.虚线与实线边框 边框虚线样式:dashed 边框实现样式:solid border:1px da ...

  8. div css仿京东订单流程图样式代码

    效果展示 http://hovertree.com/texiao/css/25/ 本效果适合PC,也适合移动端 手机扫描二维码查看效果: 效果图: 代码如下: <!DOCTYPE html> ...

  9. div 边框

    1.四个边框border-left 设置左边框,一般单独设置左边框样式使用border-right 设置右边框,一般单独设置右边框样式使用border-top 设置上边框,一般单独设置上边框样式使用b ...

随机推荐

  1. 二、JVM之体系结构

    一.JVM的架构模型 Java编译器输入的指令流基本上是一种基于栈的指令集架构,另外一种指令集架构则是基于寄存器的指令集架构. 具体来说这两种架构之间的区别: 基于栈式架构的特点 设计和实现更简单,适 ...

  2. 阿里面试Java程序员都问些什么？

    刚开始也是小白,也是一步步成成起来的.需要提的一点是,你将来是需要靠这个吃饭的,所以请对找工作保持十二分的热情,而且越早准备越好. 阿里一面 一面是在上午9点多接到支付宝的面试电话的,因为很期望能够尽 ...

  3. VSCode常用插件汇总

    vscode常用插件汇总: 点击插件名字,查看使用文档 vscode-fileheader : 添加注释到文件头,并支持自动更新文件修改时间. EditorConfig for vs code :   ...

  4. "Chrome的network中无法显示OPTIONS请求"的解决方案

    目录 #事故现场 #分析及解决方法 #参考 #事故现场 在前端发送一个跨域请求的时候,要先发送个options请求,从而获知服务端是否允许该跨域请求. 跨域资源共享标准新增了一组 HTTP 首部字段, ...

  5. java性能分析 - CPU飙高分析工具

    背景         有处理过生产问题的同学基本都能遇到系统忽然缓慢,CPU突然飙升,甚至整个应用请求不可用.当出现这种情况下,在不影响数据准确性的前提下,我们应该尽快导出jstack和内存信息,然后 ...

  6. js 弹窗插件

    toastr 参考 https://www.cnblogs.com/fu-yong/p/8609597.html prettyPhoto使用 参考

  7. Bootstrap资料

    Bootstrap手册  : https://www.jqhtml.com/bootstraps-syntaxhigh/index.html 中文文档 :https://v3.bootcss.com/ ...

  8. ubuntu set up 2 - 双系统时间问题

    http://ubuntuhandbook.org/index.php/2016/05/time-differences-ubuntu-1604-windows-10/ For users who d ...

  9. 远程执行本地脚本_linux

    一.远程执行脚本 1.免机器指纹确认(无需填写yes/no) ssh -o StrictHostKeyChecking=no root@192.168.108.78 2.远程执行本地脚本 ssh -o ...

  10. 【你不知道的javaScript 上卷 笔记5】javaScript中的this词法

    function foo() { console.log( a ); } function bar() { var a = 3; foo(); } var a = 2; bar(); 上面这段代码为什 ...