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

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实现圆角。

如何在html中做圆角矩形和 只有右边的"分隔线"的更多相关文章

  1. CODESOFT中的圆角矩形的弧度该怎样设置?

      CODESOFT标签设计软件提供多种图形制作按钮,方便用户更为快捷的制作标签.其中就包括矩形,圆角矩形的快捷创建按钮.本文将介绍如何设置CODESOFT圆角矩形的弧度. 若有疑问可直接访问:htt ...

  2. [Web 前端] 如何在React中做Ajax 请求?

    cp from : https://segmentfault.com/a/1190000007564792 如何在React中做Ajax 请求? 首先:React本身没有独有的获取数据的方式.实际上, ...

  3. 在Microsoft Expression Blend 2 中绘制圆角矩形按钮

    原文:在Microsoft Expression Blend 2 中绘制圆角矩形按钮 /* 声明:转载请保留此信息:http://www.BrawDraw.com, http://www.ZPXP.c ...

  4. [BOT] 一种android中实现“圆角矩形”的方法

    内容简介 文章介绍ImageView(方法也可以应用到其它View)圆角矩形(包括圆形)的一种实现方式,四个角可以分别指定为圆角.思路是利用"Xfermode + Path"来进行 ...

  5. Android中实现圆角矩形及半透明效果。

    注:本文由Colin撰写,版权所有!转载请注明原文地址,谢谢合作! 在做Android开发时,我们为了美观,有时候需要使用圆角矩形,或半透明之类的效果,在网页设计中很容易实现.但在Android开发中 ...

  6. 解读Unity中的CG编写Shader系列四(unity中的圆角矩形shader)

    转自 http://www.itnose.net/detail/6097625.html 上篇文章中我们掌握了表面剔除和剪裁模式 这篇文章将利用这些知识实现一个简单的,但是又很常用的例子:把一张图片做 ...

  7. 解读Unity中的CG编写Shader系列4——unity中的圆角矩形shader

    上篇文章中我们掌握了表面剔除和剪裁模式 这篇文章将利用这些知识实现一个简单的,可是又非经常常使用的样例:把一张图片做成圆角矩形 例3:圆角矩形Shader 好吧我承认在做这个样例的时候走了不少弯路,因 ...

  8. [转]解读Unity中的CG编写Shader系列4——unity中的圆角矩形shader

    上篇文章中我们掌握了表面剔除和剪裁模式这篇文章将利用这些知识实现一个简单的,但是又很常用的例子:把一张图片做成圆角矩形 例3:圆角矩形Shader好吧我承认在做这个例子的时候走了不少弯路,由于本人对矩 ...

  9. Android中绘制圆角矩形图片及任意形状图片

    圆角矩形图片在苹果的产品中很流行,相比于普通的矩形,很多人都喜欢圆角矩形的图片,因为它避开了直角的生硬,带来更好的用户体验,下面是几个设计的例子: 下面在Android中实现将普通的矩形图片绘制成圆角 ...

随机推荐

  1. AJAX-初学AJAX本地环境配置

    1.前段时间学习headfirst AJAX,发现有些概念比较陌生,理解起来比较困难,等看完了半本的JavaScript高级程序设计,再回头看这本AJAX,发现轻松了很多,但是遇到了一个问题,AJAX ...

  2. 【BZOJ-1492】货币兑换Cash DP + 斜率优化 + CDQ分治

    1492: [NOI2007]货币兑换Cash Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 3396  Solved: 1434[Submit][Sta ...

  3. VisualSVN Server搭建VDFS分布式仓研究(未成功)

    FSFS与VDFS的使用区别在于FSFS是本地仓库,VDFS是分布式仓库,实现在同一个局域网内多台仓库进行同步:以下是我的猜测,因为没搭建成功: 1.必须是同一个局域网,如果有外内网基本是不可实现,需 ...

  4. 洛谷P1345 [USACO5.4]奶牛的电信Telecowmunication

    题目描述 农夫约翰的奶牛们喜欢通过电邮保持联系,于是她们建立了一个奶牛电脑网络,以便互相交流.这些机器用如下的方式发送电邮:如果存在一个由c台电脑组成的序列a1,a2,...,a(c),且a1与a2相 ...

  5. FIneCMS /dayrui/libraries/Chart/ofc_upload_image.php Arbitrary File Upload Vul

    catalog . 漏洞描述 . 漏洞触发条件 . 漏洞影响范围 . 漏洞代码分析 . 防御方法 . 攻防思考 1. 漏洞描述 Relevant Link: http://www.wooyun.org ...

  6. PHP设计模式(三)

    注册器模式 这种模式比较简单好理解,在PHP框架中会经常用到,在某些比较大的PHP框架中,会在初始化时将一些常用的类实例放在注册器中,实际是存在注册器类中的一个静态数组中,以后想去用它的话,直接根据名 ...

  7. C# 开源项目一

    商业协作和项目管理平台-TeamLab 网络视频会议软件-VMukti 驰骋工作流程引擎-ccflow [免费]正则表达式测试工具-Regex-Tester Windows-Phone-7-SDK E ...

  8. mongo&node

    /////  node install $ sudo apt-get install python-software-properties $ curl -sL https://deb.nodesou ...

  9. O(1)快速乘注意事项

    O(1)快速乘是经典玄学优化啦~由于刚挂了一次特此总结一番. ll mul(ll u,ll v){ return(u*v-ll((long double)u*v/p)*p+p)%p; } double ...

  10. js024-最佳实践

    js024-最佳实践 本章内容: 可维护的代码 保证代码性能 部署代码 24.1 可维护性 24.1.1 代码的可维护性 代码可维护性的特征: 特性 说明 可理解性 其他人可以理解它的用途和一般途径 ...