怎样利用css样式为html元素设置圆角框

传统的html页面中,大多数都是棱角分明的长方形框框,有时候遇到设计按钮时,就需要我们为元素添加一个圆角边框,那么我们应该怎样通过使用css样式为元素设置圆角边框呢

操作方法

  • 01

    首先我们需要打开自己的DW软件,选择文件下面的新建,在弹出框中选择新建一个html页面。

  • 02

    我们进入到新建的html页面后,点击首先做的是将网页进行保存,这样我们才能在浏览器中进行预览,方便起见,我们保存到桌面上即可。

  • 03

    保存之后,我们再回到test.html页面中,敲入一些代码,使得网页可以呈现出一个个的小框。

  • 04

    按下键盘上的F12键盘,可以让网页在默认的浏览器中测试显示,我们可以看到一行的文字,

  • 05

    但是文字所在的边框之间并没有明显的间隔,接下来我们需要为文字之间添加间距。即使用margin-left,更改之后的页面如下图所示。

  • 06

    然后我们再次回到DW软件的编辑页面,在style样式中,添加一句:border-radius:5px;

  • 07

    之后我们可以再次进入浏览器中,查看页面更改之后的效果图 。我们可以看到的,原来的方框已经有了明显的圆弧边框。

(0)

相关推荐

  • 【DW教程】如何利用CSS样式设置列表文字

    我现在详细教你如何利用CSS样式设置列表文字,为的是让你很快真正理解CSS样式. 操作方法 01 打开Adobe Dreamweaver CC 2015. 02 执行菜单栏中的"文件> ...

  • css样式的多种方法设置

    操作方法 01 在html页面找到body标签,在body标签里新建一个div标签,然后在div标签中新建a标签,并在a标签中输入页数. 新建style标签 回到html代码页面,找到title标签, ...

  • JS设置CSS样式的几种方式

    JS设置CSS样式的几种方式 操作方法 01 1. 直接设置style的属性  某些情况用这个设置 !important值无效,如果属性有'-'号,就写成驼峰的形式(如textAlign)  如果想保 ...

  • CSS样式图片下载助手(仿站助手)使用说明教程

    一、CSS样式图片下载助手简介: CSS样式图片下载助手是一款仿站助手软件,他是为解决当你发现了一款你很喜欢的网站风格的时候,但当你复制了它的css样式表的时候,里面某些框架使用图片做的,显示不出来, ...

  • css样式兼容不同浏览器问题解决办法

    在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! 所有浏览器 ...

  • Dreamweaver网页设计里CSS样式表怎么添加

    在网页设计中,CSS是用于控制页面元素外观布局的样式表,怎么创建一个新的CSS样式表并修改属性参数呢,下面让我们来看看具体怎么操作. 操作方法 01 首先我创建了一个网页在里面输入的"演示文 ...

  • css样式表的详细介绍

    css样式表定义如何显示 HTML 元素. 如果样式保存在外部文件中,那么仅仅通过改变 CSS 文件,你就可以改变网站中所有 HTML 页面的的样式和外观. 假如你曾试图改变所有页面中标题的字体和颜色 ...

  • CSS样式的三种表现用法

    学会了CSS样式的三种表现用法,CSS原来可以如此简单! 操作方法 01 一.外部样式 将CSS样式编写并安放在一个独立的.css文件内,有<link />和@import两种方式,而@i ...

  • 利用CSS制作竖直排列菜单

    作为一个成功的网站,导航菜单是永远不可缺少的.导航菜单的风格往往也决定了整个网站的风格,因此很多设计者都会投入很多时间和精力来制作各式各样的导航条,从而体现网站的整体构架. 在传统方式下,制作导航菜单 ...