零基础学做网站培训介绍

当前位置:

如何制作微信小程序圆角图片

以下为学做网站论坛关于“如何制作微信小程序圆角图片”讲解视频教程。

微信小程序很多区域都是使用了圆角,并不是制作成一个圆角图片,而是通过WXSS来控制的。


border-radius:控制圆角

overflow:超出隐藏

增加wxss样式


border-radius:25px;

上面的像素值根据你的喜好进行调整,想要多圆就加大或缩小弧度值。

在CSS3中用来生成圆角效果的属性是border-radius.这个属性跟大家熟知的width等属性的用法相似:


.roundElement {
border-radius: 10px;
}

上面的这句代码的作用是设置一个元素的四个角的弧度半径值都为10px。你也可以对每个角单独指定:


.pearElement {
border-top-left-radius: 7px;
border-top-right-radius: 5px;
border-bottom-right-radius: 6px;
border-bottom-left-radius: 8px;
}

如果你觉得上面的写法太复杂,可以使用下面border-radius简写的方法:


.oddRoundElement {
border-radius: 12px 5px 12px 5px;
/* or */
border-radius: 12px 5px;
}

四个值分别代表的是top-left, top-right, bottom-right, bottom-left四个角。

以下是设置圆角的实例:

1.css代码:


.yj{

padding:10px; width:300px; height:50px;

border: 2px solid #000000;

-moz-border-radius: 15px;

-webkit-border-radius: 15px;

border-radius:15px;

}

-moz-border-radius: 15px; -webkit-border-radius: 15px; 这两个是为了兼容其他一些不常用浏览写的css圆角代码

html代码:


<div class="yj">这个div四个角都圆15px;</div>

结果如下:

2 .图片圆角也是一样的:

css代码:


.yj{-moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius:15px;}

html代码:


<img src="xp.jpg" width="100px" height="100px;" class="yj" />

3.css3圆角代码也支持上下左右的:

css代码这么写:


.yj{

padding:10px; width:300px; height:50px;

border: 2px solid #000000;

-moz-border-radius: 0px 0px 20px 25px;;

-webkit-border-radius: 0px 0px 20px 25px;;

border-radius:0px 0px 20px 25px;;

}

4.圆角代码也支持拆分的(四个边框都圆角10px的拆分css代码如下):


border-top-left-radius: 10px;

border-top-right-radius: 10px;

border-bottom-right-radius:10px;

border-bottom-left-radius: 10px;

发表评论

邮箱地址不会被公开。 必填项已用*标注

相关教程

  • 零基础新手要学习网站建设,以下的网站建设教程是零基础新手必须学习的网站制作教程。只有将以下的基础知识学会了,才能为以后建网站打下坚实的基础。
  • 这是一家上海电气公司网站,网站制作时采用传统企业网站制作方法与布局结构。网站顶部使用大尺寸的LOGO,网站导航制作使用全屏宽度菜单,每个菜单项宽
  • 广州全璟皮革制品有限公司网站,本公司是一家细致印花厂家,集数码印花、服装印花、数码直喷、印花加工等设计、生产、销售。全璟数码印花公司网站由
  • 如何注册微信小程序 图文教程 (110325 次浏览)
    要发布自己的微信小程序,首先需要在微信公众平台上注册微信小程序。注册步骤 登录“微信公众平台”,如果还没有账号,可以先注册一个。登录地址
  • 微信小程序开发授权 图文教程 (111793 次浏览)
    我们在“微信公众平台”注册好了小程序之后,接下来的工作就是开发微信小程序了。开发微信小程序前,我们需要进行授权。方法/步骤 点击“细致微信
  • 微信小程序制作步骤 图文教程 (111447 次浏览)
    上一步,我们完成了微信小程序的授权。这一步,就是使用我们购买的“微信小程序细致制作工具”,进行小程序的制作了。方法/步骤 点击左侧菜单的“
  • 很多细心的学员发现学做网站论坛的导航的背景图片每个角都是圆形的,而不是普通的直角,这就是由于我们在写DIV+CSS样式时,将网站导航的DIV的边框设置
  • 微信小程序很多区域都是使用了圆角,并不是制作成一个圆角图片,而是通过WXSS来控制的。[cce_html]border-radius:控制圆角overflow:超出隐
  • 在做网站过程中,如果想在一张网页上实现图片加文字的格式,就需要通过Dreamweaver CS6破解版软件设置背景图片。可以在网页上添加背景图片,然后
  • 各位同学大家好,我是学做网站论坛的建站会员广东崔磊。很感谢论坛老师在我学习网站制作课程期间,对我的辅导帮助。现在在这里我想给同学做分享一
  • 以下是学做网站论坛关于《Dreamweaver 如何添加网页图片热区链接》视频教程。