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

css代码如下:

.demo{
position: absolute;
top:0;
height:100% ;
border:1px solid #000;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius:15px;
}

 个人觉得问题应该是样式设置不全,没有对溢出的样式进行处理,添加了overflow:hidden;问题解决,效果如图:

结合之前出现的一些问题,例如在div框中添加文字过多超出div框等,需要对overflow的情况做一些处理

CSS设置DIV边框为圆角,添加背景色溢出的问题的更多相关文章

  1. css美化Div边框的样式实例*(转载)

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

  2. 通过css代码使边框变圆角(ie9以下浏览器不支持)

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期2014-02-11) CSS代码: <style> #myDiv { border-radius: 4px; /*这句就是 ...

  3. Qt 之 设置窗口边框的圆角(使用QSS和PaintEvent两种方法)

    Qt在设置窗口边框圆角时有两种方式,一种是设置样式,另一种是在paintEvent事件中绘制窗口.下面分别叙述用这两种方式来实现窗口边框圆角的效果. 一.使用setStyleSheet方法 this- ...

  4. css:设置div边框透明+渐变

    写作背景: 觅兼职--登陆页面,UI给的原型图很漂亮,其中有一个图要求div外面有一圈透明度为0.37且带有渐变的边框.效果图如下: 在写的时候遇到了一点小小的问题:无法给同一个div设置圆角的透明+ ...

  5. 【转】CSS设置DIV背景色渐变显示

     [原链接]http://www.2cto.com/kf/201310/248187.html <style type="text/css">     .linear{ ...

  6. CSS设置DIV背景色渐变显示

    本文转载自:http://blog.csdn.net/gingerredjade/article/details/12191741 <style type="text/css" ...

  7. CSS设置DIV背景色渐变

    div{ width: 200px; height: 200px; FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=, ...

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

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

  9. css 设置div基于父元素宽度的宽高相等的样式

    1. 前言 在移动开发中,有时候需要设置一个宽高相等的div,并且为了使它能够适配更多的屏幕,于是需要让它的宽高和屏幕宽高成一定的比例.这里将提供一个css的解决方案,让一些后端开发不用再写繁琐的js ...

随机推荐

  1. jq 点击按钮显示div,点击页面其他任何地方隐藏div

    css .bl_rencai_32{ float: left; height: 35px; line-height: 35px; } .bl_rencai_32 >input{ width: 3 ...

  2. 如何使用onclick方式添加多个事件回调函数

    通过给onclcik包裹一个函数进行上下文的切换与参数的传递: function addClcikEvent(el, fn){ if(el.onclick){ var _back = el.oncli ...

  3. 关于ie浏览器信任站点的代码

    1检测用户当前浏览器是否将域名的ip添加信任站点 js代码 //域名ip的获取 var hostname = window.location.hostname;       var WshShell ...

  4. day21:包和异常处理

    1,复习 # 序列化模块 # json # dumps # loads # dump 和文件有关 # load load不能load多次 # pickle # 方法和json的一样 # dump和lo ...

  5. VMware Workstation下ubuntu虚拟机无法上网连不上网络解决

    写在前面:本博客为本人原创,严禁任何形式的转载!本博客只允许放在博客园(.cnblogs.com),如果您在其他网站看到这篇博文,请通过下面这个唯一的合法链接转到原文! 本博客全网唯一合法URL:ht ...

  6. springboot:spring data jpa介绍

    转载自:https://www.cnblogs.com/ityouknow/p/5891443.html 在上篇文章springboot(二):web综合开发中简单介绍了一下spring data j ...

  7. 【摘】Fiddler工具使用介绍

    摘自:https://www.cnblogs.com/miantest/p/7289694.html Fiddler基础知识 Fiddler是强大的抓包工具,它的原理是以web代理服务器的形式进行工作 ...

  8. shell编程之awk命令详解

    shell编程之awk命令详解 a:focus { outline: thin dotted #333; outline: 5px auto -webkit-focus-ring-color; out ...

  9. python连接mysql-PyMySql模块

    安装 pip3 install pymysql 使用 输出mysql版本 import pymysql # 打开数据库连接 db = pymysql.connect("localhost&q ...

  10. 引入css的两种方式

    摘自:https://www.cnblogs.com/gyjWEB/p/4831646.html 在HTML中引入css的其中的两个方法: 1.如果使用链接式,需要使用如下的语句引入外部css文件: ...