如何在html中做圆角矩形和只有右边的分隔线

2024-04-28 18:40:53

这个网站满好的,可以常看看

css-matic中有几个很好的写css可视化的工具

其实做css 版式布局等都可以有工具的推荐40个优秀的免费CSS工具

debugger正则表达式在线

其实是对(理论上是对所有的)html元素: 而实际常用的是 div块, 链接a 等运用圆角矩形的样式

这个圆角是通过元素: div, a的 css 样式来实现的:

样式: border-radius/ border-top-left-radius左上/..../可以分别设置不同的, 也可以是一样的

radius是半径, 如果radius等于div 边长的一半, 就是圆

一般: 先设置整体的border,然后再设置border-radius:

border: 1px solid #ccc(这个是经典的边框灰)
border-radius: 5-10px;

在css3-matic上,还对 ff和chrome做了特别说明:

border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;   //ff和chrome, 在样式名称前面分别加上: -moz-(内核是Gecko), -webkit-
-webkit-border-radius: 5px 5px 5px 5px;
border: 0px solid #000000;

而只有右边的"分隔线",是通过div的 border样式来实现的, 只写右边的border样式就可以了: border-right: 1px solid #ccc

border-radius是css3 中的样式属性!

现代浏览器ff,chrome和ie9+以上版本的都支持 border-radius:

在 CSS2 中添加圆角矩形需要技巧。我们必须为每个圆角使用不同的图片。
在 CSS3 中，创建圆角是非常容易的。

在 CSS3 中，border-radius 属性用于创建圆角：
div
{
border:2px solid;
border-radius:25px;
-moz-border-radius:25px; /* Old Firefox */
}

-moz代表firefox浏览器私有属性
-ms代表IE浏览器私有属性
-webkit代表chrome、safari私有属性
-o-表示opera
这些都是css3里面的

以-webkit开头的Webkit浏览器特有扩展样式
与以-moz开头的Firefox特有扩展样式相同，以-webkit开头的样式是 Webkit浏览器特有的，只有Webkit浏览器可以解析。
比如，在Webkit浏览器中可以用 -webkit-border-radius实现圆角。

转载于:https://www.cnblogs.com/bkylee/p/5410401.html

如何在html中做圆角矩形和只有右边的分隔线相关推荐

HTML设置单边圆角,如何在html中做圆角矩形和只有右边的分隔线
其实是对(理论上是对所有的)html元素: 而实际常用的是 div块, 链接a 等运用圆角矩形的样式这个圆角是通过元素: div, a的 css 样式来实现的: 样式: border-radius ...
html怎么设置凹陷效果,如何在css中实现圆角内凹效果
如何在css中实现圆角内凹效果发布时间:2020-07-22 09:22:57 来源:亿速云阅读:122 作者:Leah 这期内容当中小编将会给大家带来有关如何在css中实现圆角内凹效果,文章内容 ...
android paint 圆角绘制_[BOT] 一种android中实现“圆角矩形”的方法
内容简介文章介绍ImageView(方法也可以应用到其它View)圆角矩形(包括圆形)的一种实现方式,四个角可以分别指定为圆角.思路是利用"Xfermode + Path"来进行 ...
解读Unity中的CG编写Shader系列4——unity中的圆角矩形shader
http://blog.csdn.net/mobanchengshuang/article/details/38731035 上篇文章中我们掌握了表面剔除和剪裁模式这篇文章将利用这些知识实现一个简单 ...
在Android中绘制圆角矩形图片
圆角矩形图片在苹果的产品中很流行,相比于普通的矩形,很多人都喜欢圆角矩形的图片,下面在Android中实现将普通的矩形图片绘制成圆角矩形. 先来看一下普通矩形图片的显示,代码很简单,从r ...
Android中绘制圆角矩形图片及任意形状图片
转自http://blog.csdn.net/silangquan/article/details/8056583 圆角矩形图片在苹果的产品中很流行,相比于普通的矩形,很多人都喜欢圆角矩形的图片,因为 ...
在Canvas中绘制圆角矩形
问题的提出要在Canvas中绘制一个矩形,使用strokeRect或fillRect函数即可. var canvas = document.getElementById("canvas&q ...
a标签不可点击_如何在Notion中做多级标签？-Notion102
Notion102的意思是:比101(入门级)高出一点点,但操作上仍属于新手级别. 模板链接见最下方. Notion 最新重要更新 @ 20.11.11 Timeline (数据库中增加了时间线视图. ...
Delphi中绘制圆角矩形的窗体
制作圆角矩形的窗体: 01.procedure TPortForm.FormCreate(Sender: Tobject); 02.var hr :thandle; 03.begin 04.hr:=c ...

最新文章

热门文章