圆角矩形大小怎么调整html,html圆角矩形
今天在看一个网站时,看到许多圆角矩形,全是用图画得,记得前一段时间看到用CSS代码控制的圆角矩形,心想要是这个网站的矩形全是用CSS控制的,那岂不是要写好多个样式出来,因为每个矩形的颜色、角度都是不一样的,想想这倒是个问题,用函数来实现可以不?
先来看看CSS是如何实现圆角矩形的。
1、CSS样式部分:
.main{width:100px;}
b.rounder{display:block;background: #FFF}
b.rounder b{display:block;height:1px;overflow: hidden; background: #99cc33;}
b.r1{margin: 0 1px}
b.r2{margin: 0 2px}
.content{height:22px;text-align:center; padding-top:10px; }
2、内容部分:
实际效果:
CSS圆角矩形
.main{width:100px;}
b.rounder{display:block;background: #FFF}
b.rounder b{display:block;height:1px;overflow: hidden; background: #99cc33;}
b.r1{margin: 0 1px}
b.r2{margin: 0 2px}
.content{height:22px;text-align:center; padding-top:10px; background: #99cc33;color:#fff;font-size:12px;}
从中我们可以看出:如果一个页面多次引用这样的圆角矩形,如果想用不同的颜色外观及角度的话,那么我们就需要多次设置b的background属性、设置多个r1/r2/r3/r4......,才能满足需求,这样无疑会增加样式表的体积,所以在下疯了一把,设置了一个函数来实现,呵呵
函数内容:
function rounder(r_color,r_degree,v)
{
r_color=r_color
r_degree=r_degree
v=v
code=""
if v=top then
for i=0 to r_degree-1
code=code&""
next
elseif v=bottom then
for i=1 to r_degree
code=code&""
next
end if
code=code&""
response.Write(code)
}
在这个函数里的三个参数,一目了然,r_color表示矩形的背景色,r_degree表示矩形的圆角的度数,v代表矩形的上部还是下部,可取值top或bottom。
引用时我们只需在页面要引用的部位加入以下代码即可:
rounder(#99cc33,5,top)
rounder(#99cc33,5,bottom)
这样是不是很方便呢,在一个页面里面就可以多次引用了,呵呵
另外一个例子:
CSS 圆角矩形
示例如下:
div+CSS圆角矩形
body{padding: 20px;background-color: #FFF;font: 100.01% "Trebuchet MS",Verdana,Arial,sans-serif}
div#nifty{ margin: 0 10%;background: #9BD1FA}
p {padding:10px}
div.rtop, div.rbottom{display:block;background: #FFF} div.rtop div, div.rbottom div{display:block;height: 1px;overflow: hidden; background: #9BD1FA} div.r1{margin: 0 5px} div.r2{margin: 0 3px} div.r3{margin: 0 2px} div.rtop div.r4, div.rbottom div.r4{margin: 0 1px;height: 2px}
CSS 学习指南
圆角矩形大小怎么调整html,html圆角矩形相关推荐
- 圆角矩形大小怎么调整html,在WPS中如何调整圆角矩形的弧度大小
WPS中,插入圆角矩形后,点击选中圆角矩形,这时会在圆角矩形的左上角显示一个小小的橙色的点,这个橙色小点就是圆角半径的控制点了.只要把鼠标放到橙色小点上,鼠标的图标就会变成一个小三角形,这时按下鼠标左 ...
- Android利用canvas画各种图形(点、直线、弧、圆、椭圆、文字、矩形、多边形、曲线、圆角矩形)
1.首先说一下canvas类: Class Overview The Canvas class holds the "draw" calls. To draw something, ...
- MYSQL圆角矩形表示_android 利用Bitmap获取圆角矩形、圆形图片
1.在很多时候,我们要显示图片资源,需要将他的资源显示为圆角的:示例源码如下: public static Bitmap getRoundedCornerBitmap(Bitmap bitmap,fl ...
- Android利用canvas画各种图形(点、直线、弧、圆、扁圆、文字、矩形、多边形、曲线、圆角矩形)
1.首先说一下canvas类: Class Overview The Canvas class holds the "draw" calls. To draw something, ...
- 【CSS】盒子模型圆角边框 ( 通过设置 border-radius 样式设置圆角矩形圆角半径 )
文章目录 一.盒子模型圆角边框 二.代码示例 1.代码示例 - 正常矩形边框 2.代码示例 - 圆形边框 3.代码示例 - 圆角矩形边框 4.代码示例 - 综合对比示例 一.盒子模型圆角边框 在 CS ...
- Fulutter 设置圆角背景图片Container 设置边框、圆角、阴影
Fulutter 设置圆角背景图片&Container 设置边框.圆角.阴影 在 Flutter 中,如何实现背景图片呢?又如何实现带圆角的背景图片呢? Fulutter 设置圆角背景图片 使 ...
- html给图片切圆角,如何优雅的为图片切圆角
### 写在前面 ``` 我们肯定做过这样的需求,给一个图片切圆角, 当然我们大多采用简单粗暴的方法 myIcon.layer.cornerRadius = 16.5 myIcon.layer.mas ...
- centos 调整home分区xfs_Linux中对lvm逻辑卷分区大小的调整教程(针对xfs与ext4不同文件系统)...
前言 当我们在安装系统的时候,由于没有合理分配分区空间,在后续维护过程中,发现有些分区空间不够使用,而有的分区空间却有很多剩余空间.如果这些分区在装系统的时候使用了lvm(前提是这些分区要是lvm逻辑 ...
- Mathtype全文公式大小一致调整
Mathtype全文公式大小一致调整 1.确定要调整公式的字号大小:如宋体小四,对应mathtype为12磅: 2.word切换到MathType功能区,如图: 3.点击格式化公式功能: 出现如右图图 ...
- Win11如何调整任务栏大小 Win11调整任务栏大小的方法
现在已经有很多小伙伴都已经安装Win11系统进行体验了,但有一些小伙伴在体验的时候想要更改任务栏大小却不知道如何操作,那么碰到这种问题应该怎么办呢?下面就和小编一起来看看有什么解决方法吧. Win11 ...
最新文章
- 【linux】printf在终端打印彩色hello world
- 一群热爱python运维的精英们!
- 基于黄色LED反向电流的光电检测板
- MIT喊你来上课,深度学习课程,免费的那种 | 资源
- Winform中实现序列化指定类型的对象到指定的Xml文件和从指定的Xml文件中反序列化指定类型的对象
- 为ubuntu添加多媒体以及flash等等常用包
- 电脑是否存在内存泄漏_STM32裸机内存管理解析
- QQ,MSN,Skype在线客服代码
- eclipse安装、使用hibernate插件方法
- 工作108:精准的v-for和if
- VS2015 applicationhost.config 本地域名访问
- 数据库设计原理【B树、B-树、B+树】
- 45.分支算法练习: 7622:求排列的逆序数
- 韦东山嵌入式Linux学习——015 Nand Flash(2)-Nand Flash编程实现读地址信息
- qtcpsocket断开_Qt QTcpSocket 对连接服务器中断的不同情况进行判定
- shell 修改文件格式
- 大容量sd卡reread之后/dev下概率性出现无设备文件
- android开发便签实验报告,什么是艾宾浩斯遗忘曲线?利用这一记忆规律可以提升孩子记忆力...
- 139邮箱注册免费注册 html5.mail.10086.cn,139邮箱注册(登录139免费邮箱)
- TouchDesigner学习 颜色控制模块
热门文章
- mysql 触发器很慢_mysql之视图、触发器、事物、存储过程、函数、流程控制、索引与慢查优化...
- 迎接虎虎生威的2010暨2009年51CTO年终总结大会
- C语言if的所有用法,关于if的用法
- win下apache2.4 支持php8.0
- Win10 【TITAN Xp】和【TITAN RTX】-【TensorFlow】环境简单总结
- OEE Worksheet
- mpp新增一个字段_ormpp--一个很酷的Modern C++ ORM库
- 003_创建simulink文件
- 魅族mx6 原生android,手机 篇一:魅族16s真实使用感受漫谈
- 脚本小子_Lua安装教程