css圆角box(宽度自适应)(百度知道挖出)

css圆角box(百度知道挖出)

1.css

.zhidao_box {
    position: relative;
    width: 100%;
}
.zhidao_box .rg_1, .zhidao_box .rg_2, .zhidao_box .rg_3 {
    height: 1px;
    font-size: 0px;
    overflow: hidden;
    border-style:solid;
    border-width:0;
}
.zhidao_box .rg_2 {
    border-right-width: 2px;
    border-left-width: 2px;
}
.zhidao_box .rg_3 {
    border-right-width: 1px;
    border-left-width: 1px;
}
.zhidao_box .rg_1 {
    margin: 0px 3px;
}
.zhidao_box .rg_2, .zhidao_box .rg_3 {
    margin: 0px 1px;
}
.zhidao_box .rg {
    padding-bottom: 1px;
    border-left-style:solid;
    border-left-width:1px;
    border-right-style:solid;
    border-right-width:1px;
}
.zhidao_box .tit {
    height: 24px;
    line-height: 24px;
    padding-left: 10px;
    font-size: 14px;
    font-weight: bold;
}
.zhidao_box .con {
    margin: 0px 3px;
    padding:5px 5px 5px 8px;
}
/* change color begin */
.zhidao_box .rg_1, .zhidao_box .rg_2, .zhidao_box .rg_3 {
    border-color:#a5da94;
}
.zhidao_box .rg_1 {
    background: #a5da94;
}
.zhidao_box .rg_2, .zhidao_box .rg_3 {
    background: #dbf1d4;
}
.zhidao_box .rg {
    border-left-color:#a5da94;
    border-right-color:#a5da94;
    background: #dbf1d4;
}
.zhidao_box .bg_fff {
    background: #fff;
}

/* change color end*/

2.html

<body>

use1:
<div class="zhidao_box">
<div class="rg_1"></div>
<div class="rg_2"></div>
<div class="rg_3"></div>
<div class="rg">
<div class="tit">标题</div>
<div class="con bg_fff">内容<br/>内容<br/></div>
</div>
<div class="rg_3"> </div>
<div class="rg_2"> </div>
<div class="rg_1"> </div>
</div>

use2:
<div class="zhidao_box">
<div class="rg_1"> </div>
<div class="rg_2"> </div>
<div class="rg_3"> </div>
<div class="rg">
<div class="con bg_fff">内容<br/>内容<br/></div>
</div>
<div class="rg_3"> </div>
<div class="rg_2"> </div>
<div class="rg_1"> </div>
</div>

use3:
<div class="zhidao_box">
<div class="rg_1"> </div>
<div class="rg_2"> </div>
<div class="rg_3"> </div>
<div class="rg">
<div class="con">内容<br/>内容<br/></div>
</div>
<div class="rg_3"> </div>
<div class="rg_2"> </div>
<div class="rg_1"> </div>
</div>

</body>

3.效果

转载于:https://www.cnblogs.com/TangZhongxin/archive/2010/01/07/3942470.html

css圆角box(宽度自适应)(百度知道挖出)相关推荐

css圆角box(网上流行用b标签)
css圆角box备忘 <style type="text/css"> div.box{} div.boxtitle{background-color:#888; hei ...
html笔记（二）html4+css2.0（元素类型、css精灵、宽度自适应、BFC、浏览器相关概述、css统筹）
大标题小节一.元素类型 1. 元素分类 2. 置换和非置换元素 3. 元素类型转换二.css精灵三.宽高自适应 1. 宽度自适应 2. 高度自适应 3. 最小高度自适应 4. 高度塌陷及解决办 ...
css实现左侧宽度自适应，右侧固定宽度
页面布局中经常用会遇到左侧宽度自适应,右侧固定宽度,或者左侧宽度固定,右侧自适应.总之就是一边固定宽度,一边自适应宽度. 一般固定宽度是导航栏,自适应宽度的是主体内容显示区. 所以要实现这种布局,就先 ...
html文字自适应屏幕居中显示,DIV+CSS经典布局[宽度自适应][自动屏幕居中]的实现...
test --> Header 分析: 最外层的wrapper把所有内容都嵌套在里边,整体相对定位.max min已经很好的控制了最窄最宽值,但对IE没有作用.如果没有其他布局的穿插,这一层其实 ...
css高度根据宽度自适应显示，按比例显示宽高
在项目中,我们经常遇到这样的需求,高度或者宽度需要按照比例显示,这时候就可以使用aspect-ratio属性解决问题,也可以使用padding-top: 解决 // padding-top .cont ...
html设置box设置长度自适应,CSS实现宽度自适应宽高16:9的矩形的示例
前面我们讲了怎么做一个自适应宽高1:1的正方形现在我们来讲讲做自适应16:9的矩形要怎么做第一步先计算高度,假设宽100%,那么高为h=9/16=56.25% 第二步利用之前所说设置padding ...
背景图宽度自适应及背景图合并的CSS思想
关于宽度自适应,已经是前段开发人员必备的css技能之一,而背景图的合并则属于更高级别的要求. 我们为什么要宽度自适应,原因大体有以下几点: 第一:很多情况下有这样的需求,比如做B/S前端,90%以上要 ...
css实现整体网页16 9,CSS实现宽度自适应宽高16:9的矩形的示例
前面我们讲了怎么做一个自适应宽高1:1的正方形 https://www.ddpool.cn/css/753385.html 现在我们来讲讲做自适应16:9的矩形要怎么做第一步先计算高度,假设宽100 ...
使用CSS实现三栏自适应布局（两边宽度固定，中间自适应）
所谓三列自适应布局指的是两边定宽,中间block宽度自适应.这里主要分为两大类,一类是基于position传统的实现,一类是基于css3新特性弹性盒模型布局实现. 1. 基于传统的position和m ...

css圆角box(宽度自适应)(百度知道挖出)

css圆角box(宽度自适应)(百度知道挖出)相关推荐

最新文章

热门文章