Htmlcss求问这个成功案例下方的局部线加粗怎么做到的下面浅色的是分隔线_随笔

<!DOCTYPE html>

<html>

<head>

<style>

*{margin:0padding:0}

#box ul:after{content: ""display: blockclear:bothwidth:0height: 0}

#box ul{text-align: centerborder:5px solid red}

#box ul li{list-style:nonedisplay: inline-blockwidth:120pxheight:48pxline-height: 48pxposition: relative}

#box ul li:hover{background: #f3f3f3}

#box ul li a:after{content: ""display: blockwidth:0height:5pxbackground:blueposition: absolutebottom:-5pxleft:0transition: width 1s}

#box ul li:hover a:after{width:100%transition: width 1s}

#box ul li a{text-decoration: nonedisplay: block}

</style>

</head>

<body>

<ul>

</ul>

</div>

</body>

</html>

是这样的，建议在同一画布上绘制不同模块时，记得使用 beiginPath()和closePath()框选起来，在里面使用stroke.style可以画不同颜色的东西

window.onload=function(){

var myCarvas=document.getElementById('my-carvas')//mycarvas画布的id

var ctx=myCarvas.getContext('2d')

//绘制矩形

ctx.beginPath()

ctx.fillStyle='#ff0000'//填充颜色

ctx.fillRect(5,5,100,100)//填充矩形 X Y width height

ctx.strokeStyle='blue'//边框颜色

ctx.lineWidth='5'//边框宽度

ctx.strokeRect(5,5,100,100)//边框起点X,Y width height

ctx.closePath()

//基础线条

ctx.beginPath()

ctx.lineTo(150,150)

ctx.lineTo(250,150)

ctx.lineTo(200,250)

ctx.strokeStyle='darkgreen'

ctx.closePath()

ctx.stroke()

}

</script>

效果如下，（背景颜色是另外的样式）

1、事先定义

2、通过javascript动态设置

var obj

obj=document.getElementById("tab1")

obj.style.border="2px solid red"

</script>

欢迎分享，转载请注明来源：内存溢出

原文地址: https://outofmemory.cn/zaji/7259188.html

Htmlcss求问这个成功案例下方的局部线加粗怎么做到的下面浅色的是分隔线

发表评论

评论列表（0条）

Htmlcss求问这个成功案例下方的局部线加粗怎么做到的 下面浅色的是分隔线

发表评论

评论列表（0条）

Htmlcss求问这个成功案例下方的局部线加粗怎么做到的下面浅色的是分隔线