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. C、C++和C#区别概述

    译者前言 今天突然好奇C.C++和C#这三门语言都有个C,那么它们之间到底有什么关联呢.所以就去Google了,找到了这篇文章:Understanding the Differences Betwee ...

  2. Mac下安装MySQL8的问题

    黑苹果用了一段时间之后,发现很多方面用起来比Windows还舒服些,没什么具体指标,就是纯粹一种感觉. 所以,慢慢将很多程序都迁移过来,在迁移过程中发现的一些有意思的事儿,我都把他们记录下来.如果,不 ...

  3. gulp常用插件之gulp-rev-css-url使用

    更多gulp常用插件使用请访问:gulp常用插件汇总 gulp-rev-css-url这是一款用于在gulp-rev之后覆盖js.css文件中的URL进行替换. 更多使用文档请点击访问gulp-rev ...

  4. py 二级习题(重新输出文本-----每行一句话)

    #需要的一小段文本 txt = "人生得意须尽欢,莫使金樽空对月.天生我才必有用,千金散尽还复来." #对文本进行分割,转换成列表形式 def txt_split(txt): li ...

  5. 1级搭建类105-Oracle 19c 单实例 FS(19.3+RHEL 8)公开

    项目文档引子系列是根据项目原型,制作的测试实验文档,目的是为了提升项目过程中的实际动手能力,打造精品文档AskScuti. 项目文档引子系列目前不对外发布,仅作为博客记录.如学员在实际工作过程中需提前 ...

  6. vue常用插件之打印功能、二维码插件、批量打印二维码

    vue实现打印的两种方法 vue实现批量打印二维码 (需安装二维码插件qrcodejs2) 一.vue-print-nb插件 1.安装: npm i vue-print-nb -S 2.全局注册(ma ...

  7. Jmeter-第三方插件安装

    1.插件下载 官方地址https://jmeter-plugins.org/install/Install/ 网盘地址链接: https://pan.baidu.com/s/1E4lnMWDGPWCN ...

  8. 在阿里云IIS服务器上安装证书

    在IIS服务器上安装证书 您可将下载的阿里云SSL证书安装到IIS服务器上,使您的IIS服务器支持HTTPS安全访问. 一.前提条件 申请证书时需要选择 系统自动创建CSR. 申请证书时如果选择手动创 ...

  9. PP: Robust Anomaly Detection for Multivariate Time Series through Stochastic Recurrent Neural Network

    PROBLEM: OmniAnomaly multivariate time series anomaly detection + unsupervised 主体思想: input: multivar ...

  10. glog入门demo

    glog 一. 下载与安装 git clone https://github.com/google/glog.git cd glog ./autogen.sh ./configure make mak ...