如何用css样式设置元素的轮廓

html-css020

如何用css样式设置元素的轮廓,第1张

用css样式设置元素的轮廓，其实就是为元素添加边框的意思

CSS样式代码当中，表示边框的代码是border，它是一个复合属性，包含边框的粗细、颜色、线型（实线、虚线、点线等），具体你可以查看这个样例：

<style>

    .h5course {

        border: 1px solid red

    }

</style>

<div class="h5course">使用CSS样式实现元素的轮廓（边框）添加</div>

代码含义为，为类名为h5course的元素，增加1像素红色边框

如果对选择器、边框（隶属于盒模型知识）不是太了解的话，建议选本书系统的学一学，如：《HTML5布局之路》《Head Frst HTML》等都是不错的选择

function init(){var data = '滚动字幕。', //样例数据

data_len = data.length,

len = parseInt(Math.random()*6)+6, // 数据的长度

html = '<div class="ss">'

for(var i=0i<leni++){var start = parseInt( Math.random()*(data_len-20) ),

s = parseInt( Math.random()*data_len )

html += '<div class="item"v>'+i+'- '+data.substr(start, s)+'</div>'

}

html += '</div>' document.querySelector('.list .cc').innerHTML = html+html// 复制一份数据

var height = document.querySelector('.list .ss').offsetHeight// 一份数据的高度

addKeyFrames( '-'+height+'px' )// 设置keyframes

document.querySelector('.list .cc').className += ' rowup'// 添加 rowup}

init()