gpt4 book ai didi

CSS:具有渐变背景的链接(显示: block )内对齐的带有插入阴影的图像和文本

转载 作者:行者123 更新时间:2023-11-28 13:11:45 28 4
gpt4 key购买 nike

再见,

我正在开发一个网络应用程序,我正在尝试获得一个可点击的 div(这是我通过 <a href...> 实现的,在 css 中使用线性渐变样式为“显示: block ”。没问题...

然后我想在这个 <a...> 里面插入一个图标我用 <p> 做到了包含标志性字体...再次没有问题...

然后我尝试在 calibri 中的同一 block 内的图标/字体下方以相同的样式插入一些不同的文本(我想要一个内部阴影,使它们看起来像是被“按下”)。在这里,我对结果不满意,因为我几乎无法对齐这两个元素(我将其样式设置为 <p>,我应该改用 <span> 吗?)。

例如,我想获得类似于 facebook 应用程序按钮的效果,但图像和文本垂直对齐

Facebook div/link

我该怎么做?最佳做法是什么(图标字体 + 在 photoshop 中设置字体或图像样式 + 在 css 中设置字体样式,或者什么?)?

PS:作为该链接/div 边框的漂亮的 2 行怎么样,它们的样式如何?

最佳答案

我认为最好的 - 在 photoshop 中设置图像样式 + 在 css 中设置字体样式对于线条,尝试使用渐变和盒子阴影。 http://jsbin.com/esasan/1/edit

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div class="main">
<ul class="lines">
<li class="line"></li>
<li class="line"></li>
</ul>
</div>
</body>
</html>

.main {
display:block;
position:relative;
width:150px;
height:70px;
background: #fcfcfd; /* Old browsers */
background: -moz-linear-gradient(top, #fcfcfd 0%, #eaecf2 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcfcfd), color-stop(100%,#eaecf2)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #fcfcfd 0%,#eaecf2 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #fcfcfd 0%,#eaecf2 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #fcfcfd 0%,#eaecf2 100%); /* IE10+ */
background: linear-gradient(to bottom, #fcfcfd 0%,#eaecf2 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfd', endColorstr='#eaecf2',GradientType=0 ); /* IE6-9 */
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-sizing: border-box;
}

.lines{
position:relative;
width:150px;
height:64px;
margin-top:3px;
}

.lines li {
display:inline-block;
margin-top:4px;
}

.line {
width:2px;
height:60px;
background: #9fa0a3; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, #9fa0a3 0%, #f4f6fc 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#9fa0a3), color-stop(100%,#f4f6fc)); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, #9fa0a3 0%,#f4f6fc 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, #9fa0a3 0%,#f4f6fc 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, #9fa0a3 0%,#f4f6fc 100%); /* IE10+ */
background: radial-gradient(ellipse at center, #9fa0a3 0%,#f4f6fc 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9fa0a3', endColorstr='#f4f6fc',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
margin-right:60px;
}

关于CSS:具有渐变背景的链接(显示: block )内对齐的带有插入阴影的图像和文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15450756/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com