Question

我有一张图片，上面加了20px的上边框。我想以一种显示线性渐变的方式为顶部边框着色。我尝试过不同的方法但没有成功。

你可以帮帮我吗？这是代码（html和css）：

<div class="logo"><img src="images/tiger.jpg"></div>

.logo img {width:100%;top-border:20px solid;}

Answer 1

请试试这个。我已经使边界使用<?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.example.brand.psync"> <application android:allowBackup="true" android:icon="@drawable/psynclogo" android:label="@string/app_name" android:supportsRtl="true" android:theme="@style/AppTheme" android:screenOrientation="portrait"> <activity android:name=".Main"> <intent-filter> <action android:name="android.intent.action.MAIN" android:screenOrientation="portrait" /> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> <category android:name="android.intent.category.LAUNCHER" android:screenOrientation="portrait" /> </intent-filter> </activity> </application> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> </manifest>类。

＆＃13;

before

＆＃13;

.logo{position:relative;width:200px;}
img{
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
}
.logo:before{
  /* IE10+ */ 
  background-image: -ms-linear-gradient(left, #ffb76b 0%, #FF7C00 51%, #ff7f04 100%);

  /* Mozilla Firefox */ 
  background-image: -moz-linear-gradient(left, #ffb76b 0%, #FF7C00 51%, #ff7f04 100%);

  /* Opera */ 
  background-image: -o-linear-gradient(left, #ffb76b 0%, #FF7C00 51%, #ff7f04 100%);

  /* Webkit (Safari/Chrome 10) */ 
  background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #ffb76b), color-stop(51, #FF7C00), color-stop(100, #ff7f04));

  /* Webkit (Chrome 11+) */ 
  background-image: -webkit-linear-gradient(left, #ffb76b 0%, #FF7C00 51%, #ff7f04 100%);

  /* W3C Markup */ 
  background-image: linear-gradient(to right, #ffb76b 0%, #FF7C00 51%, #ff7f04 100%);
  position:absolute;
  content:"";
  left:0;
  right:0;
  width:100%;
  height:20px;
  top:0;
}

＆＃13;

Answer 2

您可以添加这样的彩色顶部边框;

border-top: 20px solid #cccccc;

您可以提供所需的颜色

，而不是 #cccccc

边框顶部造型（线性渐变）

2 个答案: