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

转载的博文地址

将这段美化的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美化Div边框的样式实例   很多时候如果不是用了很多样式,很难把边框修饰得好看,看了一篇博文,觉得真的挺漂亮,也挺好看. 转载的博文地址 将这段美化的css代码 border:1px soli ...

  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. 搭建docker 私有镜像仓库

    前期准备 服务器:centos 7.3 docker-ce: 18.06.1-ce docker-compose: 1.22.0 docker 安装 首先,更新系统 yum update yum up ...

  2. 【Python入门学习】列表生成和函数生成器的方式实现杨辉三角

    列表生成: L = [i for i in range(10)] 列表生成器: g = (i for i in range(10)) 函数生成器使用的关键字yield实现 例如fib生成器 def f ...

  3. Markdown分级语法手册

    目录 前言(可以不看) 基本语法(18) 1. 标题:# 2. 无序列表:- 3. 有序列表:1. 4. 斜体:* 5. 粗体:** 6. 加粗斜体:*** 7. 删除线:~~ 8. 分隔线:--- ...

  4. php的大小写敏感问题整理

    php的大小写敏感问题整理 今天在开发php的过程中,因为命名大小写的问题导致代码错误,所以从网上整理了php的大小写敏感的一些资料,需要的朋友可以参考下.   PHP对大小写敏感问题的处理比较乱,写 ...

  5. USACO 2.3.4 Money Systems 货币系统(完全背包)

    Description 母牛们不但创建了他们自己的政府而且选择了建立了自己的货币系统. [In their own rebellious way],,他们对货币的数值感到好奇. 传统地,一个货币系统是 ...

  6. SQLSERVER 根据身份证号码 往出生年月日 赋值

    update CREW_SailorInfo set DT_DOB= ( case then , ) then , ) else null end) 注:此问题仅供参考 如有疑问 请加QQ群18153 ...

  7. SQL连接的方法

    1.创建连接字符串 string con = "Data Source=127.0.0.1;Initial Catalog=dingdan;Integrated Security=True& ...

  8. IT小小鸟 读书笔记

    讲真的,整本书我并没有看完,翻阅了一下,然后小小的借鉴了一下! 首先设计你自己的进度条 进度条的设计是一个很多人都知道的故事:同样的耗时,如果不给任何进度提示,只是在完成之后才弹出一个完成消息,中间没 ...

  9. Eclipse项目导入到Android Studio中

    背景 最近需要将Eclipse中的android项目导入到Android Studio中!倒腾一番,记录如下! 步骤1 打开Android Studio(下文称AS),选择Import project ...

  10. Jquery获取属性值

    jq获取某个标签内的属性值:$("#TeamPerformanceYearUl li:eq(0)").attr('data') jq获取li或者td第一个属性(索引值从零开始)$( ...