鳕鱼天空

This is Mr Wang's Tech Blog.

微信小程序wxss border及border-radius属性

--------------------border-------------------

一.边框:border 设置对象边框的特性。

1.语法:border:length   style  color 

2.style:none ,hidden,dotted,dashed,solid,double,groove,ridge,inset,outset。

 

二.相关属性。

1.border-width:设置边框宽度:常用取值:medium:默认值,相当于3px。thin:1px。thick:5px。不可以为负值。

2.border-color:设置边框颜色。

3.border-top:设置顶部边框。border-top-width,border-top-style,border-top-color 分别设置 宽度,样式以及颜色

4.border-right:设置右边框。

5.border-bottom:设置底边框。

6.border-left:设置左边框。

7.border-radius:设置对象使用圆角边框。取值为数字或者百分比。

8.当然也可以给4个角单独的设置:

左上角:border-top-left-radius,右上角:border-top-right-radius,左下角:border-bottom-left-radius,右下角:border-bottom-right-radius

9.box-shadow:设置对象阴影。

第一个值:设置水平方向阴影偏移量。

第二个值:设置垂直方向阴影偏移量。

第三个值:设置对象的阴影模糊值。不允许为负值

第四个值:设置对象的阴影外延值,不允许为负值

第五个值:color。

第六个值:inset,阴影在左上位置,如下图:box-shadow:6rpx 6rpx 6rpx 6rpx rebeccapurple inset

10.border-image:对象的边框样式使用图片来填充。

1>border-image-source:设置图片的来源。使用绝对或者相对地址或者渐变色来确定图片。

2>border-image-slice :设置边框背景图的分隔方式。取值:数值/百分比 fill.该属性指定从上右下左来分割图片,将图像分成4个角,4条边以及中间区域。中间区域始终是透明的,除非使用关键字fill。

3>border-image-width:设置边框背景的宽度。用于指定使用多厚的边框来承载呗裁剪后的图像。

4>border-image-outset:设置对象的边框背景图的扩展,意思就是说假如设置了10rpx,那么图像就会在原来基础上外延10rpx在显示。

5>border-image-repeat:设置对象的边框图片的平铺方式。

stretch:拉伸。

repeat:平铺,碰到边界的时候截断。

round:根据边框的尺寸动态调整图片的大小,使得刚好可以铺满整个边框。

space:根据边框的尺寸动态调整图片的之间的间距,使得刚好铺满整个边框。

------------------------border-radius-----------------------

border-radius: none | length{1,4} [/ length{1,4} 
其中每一个值可以为 数值或百分比的形式。 
length/length 第一个lenght表示水平方向的半径,而第二个表示竖直方向的半径。 
如果是一个值,那么 top-left、top-right、bottom-right、bottom-left 四个值相等。 
如果是两个值,那么 top-left和bottom-right相等,为第一个值,top-right和bottom-left值相等,为第二个值。 
这里写图片描述 
如果是三个值,那么第一个值是设置top-left,而第二个值是 top-right 和 bottom-left 并且他们会相等,第三个值是设置 bottom-right。 
这里写图片描述 
如果是四个值,那么第一个值是设置 top-left, 而第二个值是 top-right 第三个值 bottom-right 第四个值是设置 bottom-left 
这里写图片描述

除了上述的简写外,还可以和border一样,分别写四个角,如下: 
border-top-left-radius: //左上角 
border-top-right-radius: //右上角 
border-bottom-right-radius: //右下角 
border-bottom-left-radius: //左下角 
分别是水平方向和竖直方向半径,第二值省略的情况下,水平方向和竖直方向的半径相等。 
border-radius 只有在以下版本的浏览器:Firefox4.0+、Safari5.0+、Google Chrome 10.0+、Opera 10.5+、IE9+ 支持 border-radius 标准语法格式,对于老版的浏览器,border-radius 需要根据不同的浏览器内核添加不同的前缀,比说 Mozilla 内核需要加上“-moz”,而 Webkit 内核需要加上“-webkit”等,但是IE和Opera没有私有格式,因此为了最大程度的兼容浏览器,我们需要设置如下: 
-webkit-border-radius: 10px 20px 30px; 
-moz-border-radius: 10px 20px 30px; 
border-radius: 10px 20px 30px; 
请将标准形式写在浏览器私有形式之后。

举几个例子看一下效果:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="Keywords" content="关键词一,关键词二">
    <meta name="Description" content="网站描述内容">
    <meta name="Author" content="刘艳">
    <title></title>
    <style>
        img{border-radius: 30px;margin: 100px;}
    </style>
</head>
<body>
    <img src="../images/photo.jpg" width="300px">
</body>
</html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

效果: 
这里写图片描述 
四个角的半径都是30px;

再看一个标准的圆以及椭圆:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="Keywords" content="关键词一,关键词二">
    <meta name="Description" content="网站描述内容">
    <meta name="Author" content="刘艳">
    <title></title>
    <style>
        div{display: inline-block; border: 10px solid red;}
        .circle{width: 50px; height: 50px;
            -webkit-border-radius:50%;-moz-border-radius:50%;border-radius: 50%;}
        .elipse{width: 50px; height: 100px;
            -webkit-border-radius:50%;-moz-border-radius:50%;border-radius: 50%;}
    </style>
</head>
<body>
    <div class="circle"></div>
    <div class="elipse"></div>
</body>
</html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

效果: 
这里写图片描述 
第一个和第二个div的差别主要在于其是正方形还是长方形,圆圈在轮播时,可以替代圆圈的图片使用。

以上都是水平方向和竖直方向半径相等的例子,下面举两个水平方向和竖直方向半径不相同的例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="Keywords" content="关键词一,关键词二">
    <meta name="Description" content="网站描述内容">
    <meta name="Author" content="刘艳">
    <title></title>
    <style>
        div{display: inline-block; border: 10px solid red;margin: 100px;}
        .div1{width: 200px; height: 100px;border-radius: 0px 50px 32px/28px 50px 70px;}
        .div2{width:100px; height: 200px; border-radius: 26px 106px 162px 32px/28px 80px 178px 26px;}
        .div3{width:100px;height: 200px; border-radius: 20px 50px/ 20px 50px;}
    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
</body>
</html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

效果如下所示: 
这里写图片描述

原文:https://blog.csdn.net/ufo00001/article/details/72832770

图片改天再搞