微信小程序css篇----1.边框(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：根据边框的尺寸动态调整图片的之间的间距，使得刚好铺满整个边框。
微信小程序css篇----1.边框(Border)相关推荐
- 微信小程序css篇----定位（position）
昨天2017的微信公开课pro如期进行了,小程序将于2017年1月9日对个人开放,公司项目的demo版做了个大概,过程中花的时间最多的还是页面布局,所以后面将花一段时间将css的属性在小程序里过一篇, ...
- 微信小程序css篇----flex模型
一.Flex布局是什么? Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为Flex布局. .box{displ ...
- 微信小程序css篇----背景（Background）与颜色（Color）
一.背景:background.设置对象的背景特性.一个元素可以设置多重背景图像,每组之间用逗号隔开,如果存在重叠关系,前面的背景图像会覆盖在后面背景图上. 1.background-color:指定 ...
- 微信小程序css篇----字体(Font)
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到网站. 一.字体:font.属性在一个声明中设置所有字体属性. 可设置的属性是(按顺序): "fo ...
- 微信小程序 css边框阴影,微信小程序|CSS的内边距和圆框
本文首发于微信公众号: "算法与编程之美",欢迎关注,及时了解更多此系列文章. 问题描述 在制作小程序的时候会经常用到浮动来设计各种组件的排版,微信小程序对排版的要求很高. 光有浮 ...
- 微信小程序实战篇：商品属性联动选择（案例）
本期的微信小程序实战篇来做一个电商网站经常用到的-商品属性联动选择的效果,素材参考了一点点奶茶. 效果演示: 商品属性联动.gif 代码示例 1.commodity.xml <!-- <v ...
- 《微信小程序-基础篇》初识微信小程序
大家好,好久不见了,前段时间各种原因分享不稳定,后面一段时间内参与了主站的原力计划,请麻烦各位支持一下,万分感谢- 本系列将从零开始介绍微信小程序的开发,介绍完基础以后会实际同步开发一个微信小程序的项 ...
- 《微信小程序-进阶篇》Lin-ui组件库源码分析-列表组件List（一）
大家好,这是小程序系列的第二十篇文章,在这一个阶段,我们的目标是 由简单入手,逐渐的可以较为深入的了解组件化开发,从本文开始,将记录分享lin-ui的源码分析,期望通过对lin-ui源码的学习能加深组 ...
- 《微信小程序-进阶篇》组件封装-Icon组件的实现（一）
大家好,这是小程序系列的第九篇文章,从这篇开始我们将进入提高篇,在这一个阶段,我们的目标是可以较为深入的了解组件化开发,并且实践积累一些后续项目也就是原神资料站中用得着的组件: 1.<微信小程序 ...
最新文章
- PostgreSQL在何处处理 sql查询之四十七
- 视图——概述 || 创建或者修改视图 || 查看视图 || 删除视图
- Python flask 开发工具和框架安装
- 旅游业者泄露个人信息可被起诉
- 强大的图片浏览器---------增强、降低透明度、切换下一张
- java moneyutils_java中每月等额与先息后本计算
- 矩阵运算_迹的相关性质
- python 操作excel排序_python操作excel[转]
- 相机焦距与视场角FOV
- 人民币大写的正确写法（开票据事项）
- 将个人文件夹挂载到服务器上,通过 WebDAV 将服务器全部或某个文件夹挂载到电脑上当网络硬盘 | 很文博客...
- 在线自习室——新型的学习利器
- 安卓系统开发常用的框架
- 【Java-数据脱敏】使用Java对姓名、手机号码、证件号码进行数据脱敏
- springboott整合mybatis-plus和sharding-jdbc实现分库分表和读写分离（含完整项目代码）
- SecureCRT连接开发板
- Python常用设计模式—创建型模式
- windows消息处理过程及消息钩子
- 【笔记】wlan - 基础概念（无线、wifi、常见协议、频谱、信道、ap部署、案例）
- 2018-09-20直播笔记