css怎样设置一条线中间亮两边暗

html-css029

css怎样设置一条线中间亮两边暗,第1张

     拿走不谢!!!

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

<style>

.horizontal-line {

position: relative

margin: 75px 0

width: 100%

height: 1px

}

.horizontal-line:before {

content: ""

position: absolute

background-image: linear-gradient(to left, #777, transparent)

left: 10%

right: 50%

height: 1px

}

.horizontal-line:after {

content: ""

position: absolute

background-image: linear-gradient(to right, #777, transparent)

left: 50%

right: 10%

height: 1px

}

</style>

</head>

<body>

<div class="horizontal-line"></div>

</body>

</html>

一般就2种方法:

1:一般要设置单行文本垂直居中可以把高度和行高设置的一样就可以了,

<div style="height:30pxline-height:30px">

这里是内容

</div>

这种主要对单行文本!

2:或者也可以用设置padding-top 来结局!

楼主啊,我只能说无语了,我告诉你的是方法,正所谓授人以鱼 不如授之以渔

拜托你不要就盯着那个什么div和input 和label好不好!

多思考,思维不要太局限,要对齐的方法太多了!

可以在姓名上套span ,设置span的margin-top 或者padding 去多多尝试 你的水平才能提高

也可以用定位方法

拜托你不要为了问问而问问题, 我也不想为回答问题而回答问题!

看到你说的话只能说对你无语“2位说的不好”

实际是我们说的还都不错,只是你自己思维实在太局限!

我们告诉你的只是方法,css是要整体考虑的,你只是简单说了你要的效果,我们也不知道你全部的页面代码, 告诉了你方法你知道怎么做就行了 细节要靠自己

1、新建html文件。

2、创建两个div,并赋予id。

3、为两个div设置宽高和背景,并设置左右浮动。

4、预览效果如图。

5、创建第三个div。

6、为第三个div设置宽高和背景。

7、预览效果如图。

注意事项:

随着HTML的成长,为了满足页面设计者的要求,HTML添加了很多显示功能。但是随着这些功能的增加,HTML变的越来越杂乱,而且HTML页面也越来越臃肿。于是CSS便诞生了。