首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

wxss学习系列《三》背景(Background)与颜色(Color),边框(Border)

一、背景(Background)与颜色(Color) 一、背景:background。 设置对象的背景特性。...1.background-color:指定背景的颜色。取值:正常的颜色取值。 2.background-image:背景图片。...二、颜色:color:设置对象的文本颜色。 可使用颜色名,rgb,hex,rgba,hsl,hsla,transparent等等来设置。 ? opacity:设置对象的不透明度。...1.border-width:设置边框宽度:常用取值:medium:默认值,相当于3px。thin:1px。thick:5px。不可以为负值。 2.border-color:设置边框颜色。...border-top-width,border-top-style,border-top-color 分别设置 宽度,样式以及颜色 4.border-right:设置右边框

2.7K50

画布就是一切(一)— 画布编程的基本模式

对于一个矩形,默认的情况下显示黑色边框,当鼠标悬浮在矩形上的时候,矩形的边框能够显示为红色,就像下图一样: 那么如何实现这个功能呢?...悬浮变色的场景下,需要的东西很简单: 矩形位置 矩形大小 矩形边框颜色 整理完成以后,我们还需要进行提炼。有的读者可能会说,上述整理的东西已经足够了,还需要提炼什么呢?...但对于矩形边框颜色是不是状态,则需要探讨。在我看来,应该属于渲染的范畴,不属于状态的范畴。为什么这么来理解呢?...-- 同级目录下的index.js --> 同级目录下的index.js: // 同级目录的index.js...drawRect(ctx, rect) { // 暂存当前ctx的状态 ctx.save(); // 设置画笔颜色:黑色 ctx.strokeStyle = rect.hover ?

18520

画布就是一切(一)— 画布编程的基本模式

对于一个矩形,默认的情况下显示黑色边框,当鼠标悬浮在矩形上的时候,矩形的边框能够显示为红色,就像下图一样: 那么如何实现这个功能呢?...悬浮变色的场景下,需要的东西很简单: 矩形位置 矩形大小 矩形边框颜色 整理完成以后,我们还需要进行提炼。有的读者可能会说,上述整理的东西已经足够了,还需要提炼什么呢?...但对于矩形边框颜色是不是状态,则需要探讨。在我看来,应该属于渲染的范畴,不属于状态的范畴。为什么这么来理解呢?...-- 同级目录下的index.js --> 同级目录下的index.js: // 同级目录的index.js...drawRect(ctx, rect) { // 暂存当前ctx的状态 ctx.save(); // 设置画笔颜色:黑色 ctx.strokeStyle = rect.hover ?

20410

画布就是一切(一)— 画布编程的基本模式

对于一个矩形,默认的情况下显示黑色边框,当鼠标悬浮在矩形上的时候,矩形的边框能够显示为红色,就像下图一样: 那么如何实现这个功能呢?...悬浮变色的场景下,需要的东西很简单: 矩形位置 矩形大小 矩形边框颜色 整理完成以后,我们还需要进行提炼。有的读者可能会说,上述整理的东西已经足够了,还需要提炼什么呢?...但对于矩形边框颜色是不是状态,则需要探讨。在我看来,应该属于渲染的范畴,不属于状态的范畴。为什么这么来理解呢?...-- 同级目录下的index.js --> 同级目录下的index.js: // 同级目录的index.js...drawRect(ctx, rect) { // 暂存当前ctx的状态 ctx.save(); // 设置画笔颜色:黑色 ctx.strokeStyle = rect.hover ?

17720

从零开始学 Web 之 CSS3(二)颜色模式,文字阴影,盒模型,边框圆角,边框阴影

一、颜色模式 颜色模式有两种: RGBA rgba(0,0,0,0.5); //黑色,透明度0.5 HSLA(颜色(0~360),饱和度(0%~100%),明度(0%~100%),透明度(0~1)) 红橙黄绿青蓝紫红...:颜色从 0~360 顺序,各占30度。...3、浏览器的兼容性 IE8 及以上版本支持该属性,Firefox 需要加上浏览器厂商前缀 -moz-,对于低版本的 IOS 和 Android 浏览器也需要加上 -webkit- 四、边框圆角 使用.../*添加边框圆角*/ /*1.设置一个值:四个角的圆角值都一样*/ border-radius: 10px; border-radius: 50%; /*2.设置两个值:第一个值控制左上/右下,第二个值控制右上...*分别是水平方向的偏移:左上,右上,右下,左下 ,垂直方向的偏移:左上,右上,右下,左下*/ border-radius: 100px 0px 0px 0px/20px 0px 0px 0px; 五、边框阴影

1.4K30
领券