css画圆角框

最新推荐文章于 2024-08-01 00:00:45 发布
最新推荐文章于 2024-08-01 00:00:45 发布
阅读量1k 收藏
点赞数
分类专栏： 学习笔记 css 文章标签： css class div xhtml bt html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Alinaxz/article/details/6602342
版权



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

<style type="text/css">
.b1 {height: 1px; font-size: 1px; overflow: hidden; display: block; background: #B2D0EA; margin: 0 3px; clear:both;}
.b2 {height: 1px; font-size: 1px; overflow: hidden; display: block; background: #EDF7FF; border-right: 2px solid #B2D0EA; border-left: 2px solid #B2D0EA; margin: 0 1px; clear:both;}
.b3 {height: 1px; font-size: 1px; overflow: hidden; display: block; background: #EDF7FF; border-right: 1px solid #B2D0EA; border-left: 1px solid #B2D0EA; margin: 0 1px; clear:both;}
.b4 {height: 1px; font-size: 1px; width:100%; overflow: hidden; display: block; background: #B2D0EA; clear:both;}
.bc {font-size: 12px; overflow: hidden; display: block; background: #EDF7FF; border-right: 1px solid #B2D0EA; border-left: 1px solid #B2D0EA; margin: 0 0px; clear:both;}
.bt {background: #EDF7FF;margin:0 2px;padding:5px;}
.bb {background: #FFFFFF;margin:0 2px;padding:5px;} /**另一种颜色*/ .bb1{background: #B8E7B3;}/*边框线最外层背景颜色*/ .bb2{background: #E7F9E3;border-left-color: #B8E7B3;border-right-color: #B8E7B3;}/*边框线的背景和边框线颜色*/ .bb3{background: #E7F9E3;}/*标题背景颜色*/ </style>

</head>


<body>
<b class="b1"></b>
<b class="b2"></b>
<b class="b3"></b>
<div class="bc">
    <div class="bt ">aaaa</div>
    <b class="b4"></b>
    <div class="bb"> bbbbbb </div>
</div>
<b class="b3"></b>
<b class="b2"></b>
<b class="b1"></b> <br />



<b class="b1 bb1"></b>
<b class="b2 bb2"></b>
<b class="b3 bb2"></b>
<div class="bc bb2">
    <div class="bt bb3">ccccc</div>
    <div class="bb">ddddd </div>
</div>
<b class="b3 bb2"></b>
<b class="b2 bb2"></b>
<b class="b1 bb1"></b>

</body>

</html>


Alinaxz
关注
专栏目录
css圆角框四周阴影,css3圆角边框，边框阴影
weixin_39875503的博客
08-03 940
border-radius向元素添加圆角边框，css3中的。IE9+chrome safari5+firefox4+现在都支持。可以向input div等设置边框。与border相似，可以四个角一起设置，也可以单独设置。语法：border-radius:1-4 length|%/1-4 length|%;-moz-border-radius:10px;支持旧的firefox-webki...
使用CSS画圆角边框
sandy_kisa的专栏
02-08 945
.bg{ /* CSS3 border-radius: 20px; */ border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; /* Firefox -moz-b
利用css3绘制一个圆角边框
destiny1234544的博客
06-02 478
在css3出现之前，我们要定义一个圆角边框，需要提前绘制好图形，但是在追求效率的需求下，css3推出了边框样式大大提升了网页制作的效率，用户只需要输入一段简单的代码就可以绘制圆角边框，这就需要使用到css3中的border-radius属性，我们只需要在border-radius属性中定义半径R就可以实现圆角的效果，下图是未实现圆角前的效果： 下面展示一些 border-radius的内联代码片。 // A code block var foo = 'bar'; // An highlighted bl
css实现圆角渐变边框
最新发布
ddx2019的博客
08-01 646
用css实现圆角渐变边框，每种方式都有其特点和适用场景。可以根据具体需求和浏览器兼容性选择合适的实现方式。若仅需实现渐变边框，则用border-image即可。
css画三角形与边框圆角
m0_62823653的博客
03-04 653
css画三角形 步骤 1.设置一个盒子。 2.设置四周不同颜色的边框。 3.将盒子宽高设置为0，仅保留边框。 4.得到4个三角形，选择其中一个后，其他三角形{边框}设置颜色透明。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <m
css 画线 带圆角,用CSS 制作边框圆角线
weixin_30320081的博客
08-04 923
不是的。一般是通过圆角的图片来完成的。不过也有纯CSS代码制作的圆角边框，不过不如圆角图片来的自然。给你参考一个这样的代码，你可以试试看效果。#xsnazzyh1,#xsnazzyh2,#xsnazzyp{margin:010px;letter-spacing:1px;}#xsnazzyh1{font-size:2.5em;color:#fff;}#xsnazzyh2...
css3圆角边框，动画
Z_41527的博客
01-23 201
创建圆角边框——border-radius向边框添加阴影——border-shadow规定背景图片的尺寸——background-size我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。字体，文本效果，2D,3D转换
纯CSS丝滑边框线条动画
南城
05-27 1289
纯CSS基于两个元素的1像素间距透出边框线条，配合使用`backdrop-filter`设置纯背景模糊效果，实现炫酷边框线条动画
CSS篇之圆角梯形
ae_pppppp的博客
12-13 4202
圆角梯形
一款圆角CSS3动画线条边框代码
06-12
这款“圆角CSS3动画线条边框代码”正是利用了CSS3的强大特性，创建出一种独特且吸引人的视觉效果。下面我们将深入探讨这个主题，解析其背后的实现原理和相关知识点。 首先，圆角边框是通过CSS3的`border-radius`...
css圆角提示框.zip
07-03
【CSS圆角提示框】是一种常见的前端开发技术，主要用于创建具有视觉吸引力且用户体验良好的提示信息。在本案例中，我们看到的"css圆角提示框.zip"是一个包含纯HTML和CSS代码的压缩包，用于展示如何在不同浏览器上...
css圆角提示框特效代码
03-20
本主题聚焦于“css圆角提示框特效代码”，这是一种利用CSS技术实现的具有圆角边框的提示框效果，旨在提供用户友好的界面提示信息。在所有主流浏览器中，这个效果都能得到良好的兼容性，确保了广泛的适用性。 在CSS...
CSS+Jquery实现页面圆角框方法大全
10-29
而随着CSS技术的发展，纯CSS实现圆角框变得越来越流行，且具有更好的优化和简练性。 现在网络上流行的方法主要有以下几种： 1. 无图片纯CSS圆角框 这种方法利用多个1像素高的div容器，通过背景色和边框色来模拟...
input输入框为只读灰色
热门推荐
Alinaxz的专栏
07-26 1万+
.inputReadOnly{readonly:expression(this.readOnly=true);background-color:expression((this.readOnly && this.readOnly==true)?"#BEBEBE":"") }
js 字符串转日期并比较大小(附其它操作)
Alinaxz的专栏
07-26 6454
function changeUserStatus(){                var dateF=document.getElementById("f_datefrom").value;                var dateT=document.getElem
jqgrid navButtonAdd edit
Alinaxz的专栏
08-29 5030
java代码（下拉列表编辑） @RequestMapping("queryLanguageForEdit.do")     @ResponseBody     public String queryLanguageForEdit(ModelMap model) {
第一个jqGrid的demo
Alinaxz的专栏
07-22 4544
1 actionpublic ActionForward search(ActionMapping mapping, ActionFormform,   HttpServletRequestrequest, HttpServletResponse response)   thro
ajax jquery springmvc 级联下拉框
Alinaxz的专栏
07-29 3085
function initNetCode() {     var html = "";     $.ajax({         type: "post",         async: false,         url: "user/initUserForm.do
七种CSS圆角框方案：兼容与美观兼顾
在前端开发中，CSS圆角框设计是一项常见的视觉美化技巧，能够提升页面的吸引力和用户体验。本文将介绍七种经典的CSS圆角框解决方案，每一种方法都有其独特的优缺点，以便设计师和开发者根据具体需求进行选择。 1. ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值