这么几天需要做一个类似于层级展示的东西,最后一层需要做一些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. PAT甲级1141 Ranking of Institutions

    题目:https://pintia.cn/problem-sets/994805342720868352/problems/994805344222429184 题意: 给定几个学生的PAT分数和学校 ...

  2. phpredis中文开发文档

    刚好要用看了网上翻译版本都是2011,2012年的,随手翻译一下新版 2017年10月28日23:48:08 使用方法 : Ctrl+F 官方英文版 https://github.com/phpred ...

  3. The way to unwind the stack on Linux EABI

    I. probe the stack frame structure The original idea is to unwind the function call stack according ...

  4. 前端模板 artTemplate之辅助方法template.helper

    var labelMap = { onlinePayment:{ label:"在线支付", desc:"支持大部分储蓄卡.信用卡及第三方平台支付", name ...

  5. Jedis简介

    实际开发中,我们需要用Redis的连接工具连接Redis然后操作Redis, 对于主流语言,Redis都提供了对应的客户端: https://redis.io/clients https://redi ...

  6. Vue2.0 v-for 中 :key 到底有什么用?

    要解释 key 的作用,不得不先介绍一下虚拟 DOM 的 Diff 算法了. vue 和 react 的虚拟 DOM 的Diff算法大致相同,其核心是基于两个简单的假设: 1.两个相同的组件产生类似的 ...

  7. 14.0-uC/OS-III挂起队列

    1.当任务等待信号量. mutex.事件标志组.消息队列时,该任务会被放入挂起队列. 挂起队列是一个OS_PEND_LIST类型的数据结构,它包含了三部分内容. .NbrEntries 挂起队列中有几 ...

  8. Kali2安装完成后的设置

    1.安装中文输入法 vim /etc/apt/sources.list 全部删除,改为国内源 #中科大 deb http://mirrors.ustc.edu.cn/kali kali-rolling ...

  9. bugfree3.0.1-BUG解决方案修改

    该篇内容来自文档“masterBugFree2.pdf”,记录在这里. 1.如何将解决方案改为中文 在\Bugfree\Lang\ZH_CN_UTF-8 \_COMMON.php 文件中做如下修改/* ...

  10. 极验验证使用-滑动&选字验证码

    准备 SDK下载 首先在极验官网下载好SDK,附上官网链接,点此可直接下载python版zip包. 模块安装 使用该SDK时发现它依赖两个模块,分别是geetest和requests. pip ins ...